CSS第一天
CSS第一天
一、定义
CSS：层叠样式表，用来美化页面
二、书写位置（即引入方式）
1，内嵌式，写在head标签下的style标签内部
2，外联式，同样写在head标签内部，但是用的是link标签，逻辑是写在外部的CSS文件里的
3，行内式，写在元素的style属性中
三、语法结构
选择器{
属性：值；
}
四、选择器分类
1，标签选择器
div{
color: red;
}
以标签名为选择器名，这样写可以控制所有这类标签的样式
2，类（class）选择器（最常用）
.tt{ color: blue; } <div class="tt">hhhhhhdsd</div> <div class="tt">sdasdasd</div> <p class="tt">dhsdhsjh</p> <a href="#" class="tt">sdsad</a>
.类名为选择器名，会选择整个页面上类名相同的标签，一个标签里可以写多个类
3，id选择器
#ss{ color: blue; } <div id="ss">nihao a </div>
#id名为选择器，根据id找到标签
4，通配符选择器
*{
color: blue;
}
*可以选择所有元素进行样式控制
5，后代选择器（子孙都可以）
div p{ color: blue; } <div> <p> <a href="#">kkk</a> <a href="#">ksas</a> </p> <a href="#">jjj <p>kdlsdk</p></a> </div>
div p用空格隔开，可以控制所有div标签下的所有p标签，选择器用空格隔开，后面的选择器必须要在前面的选择器里有的
6，子代选择器（只有儿子可以）
div>p{ color: blue; } <div> <p> <a href="#">kkk</a> <a href="#">ksas</a> </p> <a href="#">jjj <p>kdlsdk</p> </a> </div>
div>p用‘>’隔开，只会选择div标签下的第一层中p标签，于是a标签的下p标签是不会被选中的
7，毗邻选择器
div+p{ color: red; } <p id="p1">dsdasdada</p> <div>kkkkk</div> <p id="p2">kksdksdk</p> <p id="p3">sdaaddjkjdjj</p>
div+p用‘+’加号隔开，只会选择id为p2的p标签
8，弟弟选择器
div~p{ color: red; } <p id="p1">dsdasdada</p> <div>kkkkk</div> <p id="p2">kksdksdk</p> <p id="p3">sdaaddjkjdjj</p> <span>ssss</span> <a href="#">dhshdhashd</a>
div~p用‘~’隔开，选择的是div标签后面的所有p标签
9，交集选择器
p.p1{ color: brown; } <p>jjjjjjjj</p> <p class="p1">dsdasdada</p> <div>kkkkk</div> <p class="p1">kksdksdk</p> <p class="p1">sdaaddjkjdjj</p> <span>ssss</span> <a href="#" class="p1">dhshdhashd</a>
p.p1连着写在一起，会选择既是p标签又是属于p1类的，所以第一个p标签不满足
10，并集选择器
a,.p1{ color: brown; } <p>jjjjjjjj</p> <p class="p1">dsdasdada</p> <div>kkkkk</div> <p class="p1">kksdksdk</p> <p class="p1">sdaaddjkjdjj</p> <span>ssss</span> <a href="#" class="p1">dhshdhashd</a>
选择器之间以‘，’逗号隔开，会选择满足a标签或者.p1类的
11，伪类选择器
/* 未访问的链接 */控制a标签
a:link {
color: #FF0000
}
/* 已访问的链接 */
a:visited {
color: #00FF00
}
/* 鼠标移动到链接上 */ 这个用的比较多，当鼠标停留在上面时的样式
a:hover {
color: #FF00FF
}
/* 选定的链接 */ 就是鼠标点下去还没有抬起来的那个瞬间，可以让它变颜色
a:active {
color: #0000FF
}
/*input输入框获取焦点时样式*/
input:focus { #input默认的有个样式，鼠标点进去的时候，input框会变浅蓝色的那么个感觉
#outline: none;
background-color: #eee; #框里面的背景色
}
12，伪元素选择器
#将p标签中的文本的第一个字变颜色变大小
p:first-letter {
font-size: 48px;
color: red;
}
/*在每个<p>元素之前插入内容*/
p:before {
content:"*";
color:red;
}
/*在每个<p>元素之后插入内容*/
p:after {
content:"[?]";
color:blue;
}
五、选择器的优先级
我们可以通过不同的选择器来选择标签，如果多个选择器选中了同一标签时，该以那个选择器来渲染标签呢？于是就牵扯到选择器的优先级问题。
1,我们还得有个知识点，当后代没有自己的选择器，会继承父级的样式中的某些属性，比如
div{ color: blue; } <div> aasdasdsad <p> <a href="#">kkkkk</a> <span>dasdas</span> </p> <a href="#">kkdkkdkksk</a> <span>rewrrrreerrre</span> </div>
此时div标签下的所有标签前的文本颜色都会继承div标签的文本颜色。但注意继承的优先级是最小的。color，text—，font-，line-，cursor可以被继承的
例外：
a标签不继承颜色
h标签不继承font-size，font-weight
2,选择器的优先级：继承<通配符<标签选择器<class选择器<id选择器<行内样式<!important
3,选择器权重
在复合选择器中，如何计算选择器权重，只要出现important，优先级永远是最高的，其次是行内样式
行内：1000
id：100
类：10
元素：1
继承：0
把所有的权重相加，但是永不进位
六、元素的显示模式
1，块级元素
display：block
会独自占据一整行，可以设置有效的宽高，子元素默认和父元素一样宽，代表div，h1-h6
2，行内元素
display：inline
一行上可以显示多个，不能设置有效的宽高，其宽高依赖于内容，代表span，strong，em
3，行内块级元素
display：inline-block
一行上可以显示多个，可以设置有效的宽高，代表img，input
我们可以通过display属性来重新设置标签属性
4，display：none和visibility：hidden的区别
两者都有隐藏的作用
visibility：hidden隐藏的元素仍然占据空间，该元素虽然被隐藏了，但仍然会影响布局
display：none隐藏的某个元素不会占据空间，不会影响布局
七、font相关属性
font-style:值 控制字体是否斜体
可选值：normal 正常，italic 斜体，oblique 斜体
font-weight:值 控制字体粗细
可选值：normal 正常，bold 加粗，bolder 更粗，lighter 细体
还可以写数值，100-900间，400相当于normal，700相当于bold
bolder和light会受到字体的现在，一般中文到达bold就是最大，并且一般中文没有细体
font-size:值 控制字体大小
值为数字，后面跟上单位px，网页上的默认为16px
font-family:值 控制字体
值为所有字体类型，比如宋体，楷体。。。。
font连写
font：font-weight font-style font-size font-family
前两个可以省略，前两个可以互换位置，后两个只能固定位置，并且不能省略
八、background相关属性
background-color:值 设置背景颜色
background-image:url（图片的路径） 控制的是背景图片
background-repeat：值 控制背景图片是否重复（平铺）
值可选：no-repeat 不平铺，repeat-y 垂直平铺，repeat-x 水平平铺，repeat 两个方向平铺
background-position:值 控制背景图片的位置
值可选：水平：left center right 垂直：top center bottom
长度赋值：先写x的位移，再写y的位移
background-attachment：值 控制背景图片是否随着滚动条滚动
值可选：scroll 默认的随着滚动条滚动 ， fixed 不滚动
background连写
background：red url（图片路径） no-repeat top center 属性没有顺序要求，都可以省略
九、文本（text）属性
text-align:值 文本的水平对齐方式
值可选：left 左对齐，center 居中对齐，right 右对齐
text-decoration：值 文本修饰
值可选：none 正常，underline 下划线，overline 上划线，line-through 删除线
text-indent：值 文本首行缩进
值为数字加上单位px，单位也可以为em，1em为一个字体大小
十，边框属性
border-style：值 控制边框的样式
值可选：none 无边框，dotted 点状虚线边框，dashed 矩形虚线边框，solid 实线边框
border-weight：值 设置边框宽多少
值为数字加单位px
border-color：值 设置边框颜色
border连写
border：2px solid red;
除了统一设置边框之外，还可以单独为某一边设置边框
border-top-style：值 ，border-top-color：值 ， border-top-weight：值 这是为上边框设置属性，还可以换成right，left，bottom
border-radius：值 用这个属性能实现圆角边框的效果
值可为数字加单位px，当为宽或高的一半时，就为圆形，值还可以为百分数，当为50%时，也为一个圆。两种前提是在正方形下
版权声明：本文为12345huangchun原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。