前端之CSS
CSS :定义如何显示HTML文件
每个CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束
1.CSS语法
选择器{属性1:值1;属性2:值2;}
2.CSS的三种引入方式:
1.行内样式:直接将样式写在标签内部的style属性
<p style="color: red">Hello world.</p>
2.内部样式:在head标签中写style标签
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>
3.外部样式:将样式写在单独的css文件中,通过link标签的href属性导入(项目多用这种)
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
3.CSS选择器*****jQuery选择器类似
1.基本选择器
1.元素选择器
p {color: "red";
2.ID选择器
#i1 { background-color: red; }
3.类选择器
.c1 { font-size: 14px; } p.c1 { color: red; }
注意:
样式类名不要用数字开头(有的浏览器不认)
标签中的class属性如果有多个,要用空格分隔
4.通用选择器
* {
color: white;
}
2.组合选择器
1.后代选择器
/*li内部的a标签设置字体颜色*/
li a {
color: green;
}
2.儿子选择器
/*选择所有父级是 <div> 元素的 <p> 元素*/ div>p { font-family: "Arial Black", arial-black, cursive; }
3.毗邻选择器
/*选择所有紧接着<div>元素之后的<p>元素*/ div+p { margin: 5px; }
4.弟弟选择器
/*i1后面所有的兄弟p标签*/ #i1~p { border: 2px solid royalblue; }
弟弟选择器的两个条件:1.同级 2.在下面
3.属性选择器
/*用于选取带有指定属性的元素。*/ p[title] { color: red; } /*用于选取带有指定属性和值的元素。*/ p[title="213"] { color: green; }
/*找到所有title属性以hello开头的元素*/ [title^="hello"] { color: red; } /*找到所有title属性以hello结尾的元素*/ [title$="hello"] { color: yellow; } /*找到所有title属性中包含（字符串包含）hello的元素*/ [title*="hello"] { color: red; } /*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/ [title~="hello"] { color: green; } 不怎么常用的属性选择器
4.分组和嵌套
1.分组
当每个元素的样式相同的时候,没有必要重复地为每个元素都设置样式,可以通过在多个选择器之间使 用逗号分隔的分组选择器来统一设置元素样式
5.伪类选择器
1. :hover --> 鼠标移动到标签上时应用的样式
2. :focus --> input标签获取焦点时应用的样式
6.伪元素选择器
p:before { --> 在p标签内部的最前面追加一个内容
content:"*";
color:red;
}
p:after { --> 在p标签内部的最后面追加一个内容
}
清除浮动;
.clearfix:after {
content:"";
clear:both;
display:block;
}
4.CSS选择器的优先级*****
1.选择器相同
最后加载的样式覆盖上面的样式
2.选择器不同
不同的选择器的优先级不一样(根据权重计算)
内联(1000)>ID选择器(100)>类选择器(10)>元素选择器(1)>继承的(0)
3.不讲道理的
!important
5.CSS属性
1.文字属性相关
1.font-family:"文字1","文字2",
2.font-size 文字大小
3.font-weight 字体粗细
4.color 字体颜色
1.英文的颜色名 red
2.16进制颜色代码 #FF0000
3.RGB rgb(255,0,0) 字体颜色(可通过截图来获取)
4.rgba(255,0,0,0.4) 字体颜色(可以设置颜色的深浅)
2.宽和高
1.width 宽
2.height 高
只有块儿级标签设置宽和高才有效
3.背景
background
background-color: red 颜色
background-image: url() 背景图片
4.文本样式
1.水平居中
text-align : center
2.单行文本的垂直居中
line-height=父标签的高度
3.文本装饰线
text-decoration:none/under-line/over-line/line-through
5.CSS盒子模型
内容 --> padding --> border --> margin
6.浮动
float:left/right
浮动的副作用
7.定位
1.相对定位 --> 相对自己原来在的文字做定位
2.绝对定位 --> 相对自己已经定位过的祖先标签
3.固定定位 --> 相对于屏幕做定位
8.溢出
overflow: hiddden/scroll/auto
9.边框
border : 1px solid red;
boder - radius:50%
10.display
1. block
2.inline
3.inline-block
4.none
