知识内容:
1.CSS选择器
2.CSS常用样式
一、CSS选择器
1.基础选择器
- 通用元素选择器 *: 所有的标签都变色
- 标签选择器：匹配所有使用p标签的样式 p{color:red}
- id选择器：匹配指定的标签 #p2{color:red}
- class类选择器：谁指定class谁的变色，可选多个 .c1{color:red} 或者 div.c1{color:red}
注: 可以对块级标签设置长宽，不可以对内联标签设长宽（它只会根据他的文字大小来变）
1 <!--__author__ = "wyb"--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>基础选择器</title> 7 <style> 8 /*通用元素选择器*/ 9 body{ 10 background: #b6bbb2; 11 } 12 div{ 13 background: #747F8C; 14 color: red; 15 } 16 /*id选择器*/ 17 #h1{ 18 color: #501c56; 19 } 20 /*class选择器*/ 21 .c1{ 22 background: #2d4ca2; 23 color: #41db50; 24 } 25 </style> 26 </head> 27 <body> 28 <h1 id="h1">id</h1> 29 <div> 30 <p>内容1</p> 31 </div> 32 <span class="c1">class1</span> 33 <div> 34 <p>内容2</p> 35 </div> 36 <span class="c1">class1</span> 37 <span class="c1">class1</span> 38 </body> 39 </html>
效果如下：
2.层级选择器
.c1 .c2 div{background-color:red;}，各级之间用空格隔开，各级之间是上下级关系，实例如下:
1 <!--__author__ = "wyb"--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>层级选择器</title> 7 <style> 8 /*以下3种写法效果是一样的*/ 9 /* 10 span div{ 11 background: #2d4ca2; 12 } 13 .c1 div{ 14 background: #2d4ca2; 15 } 16 */ 17 .c1 #c2{ 18 background: #2d4ca2; 19 } 20 </style> 21 </head> 22 <body> 23 <div class="c1">3306</div> 24 <span class="c1"> 25 sdfasf 26 <div id="c2">asdf</div> 27 </span> 28 <div class="c1">555666</div> 29 </body> 30 </html>
效果如下:
3.组合选择器
input,div,p{ background-color:red; }，各级之间用逗号隔开，各级之间是并列的关系
1 <!--__author__ = "wyb"--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>组合选择器</title> 7 <style> 8 #i1, #i2, #i3{ 9 background: #2d4ca2; 10 color: #41db50; 11 } 12 </style> 13 </head> 14 <body> 15 <div id="i1">第一行</div> 16 <div id="i2">第二行</div> 17 <div id="i3">第三行</div> 18 </body> 19 </html>
效果如下:
4.属性选择器
input[type='text']{ width:100px; height:200px; }，对选择到的标签再通过属性再进行一次筛选
1 <!--__author__ = "wyb"--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>属性选择器</title> 7 <style> 8 input[type="text"]{ 9 width:100px; 10 height: 200px; 11 } 12 </style> 13 </head> 14 <body> 15 <input type="text"> 16 <input type="password"> 17 </body> 18 </html>
效果如下:
5.伪类
1 a:link（没有接触过的链接）,用于定义了链接的常规状态 2 a:hover（鼠标放在链接上的状态）,用于产生视觉效果 3 a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接 4 a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态 5 6 a:link {color: #FF0000} /* 未访问的链接 */ 7 a:visited {color: #00FF00} /* 已访问的链接 */ 8 a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ 9 a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }
1 <!--__author__ = "wyb"--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>伪类</title> 7 <style> 8 a:hover{ 9 color: #a2001b; 10 } 11 a:active{ 12 color: #000000; 13 } 14 </style> 15 </head> 16 <body> 17 <span><a href="">百度</a></span> 18 <span><a href="">知乎</a></span> 19 <span><a href="">淘宝</a></span> 20 <span><a href="">天猫</a></span> 21 </body> 22 </html>
二、CSS常用样式
1.通用属性
(1)color
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
- 十六进制值 - 如: ＃FF0000
- 一个RGB值 - 如: RGB(255,0,0)
- 颜色的名称 - 如: red
(2)text-align
text-align属性规定元素中的文本的水平对齐方式。
- left 把文本排列到左边。默认值：由浏览器决定。
- right 把文本排列到右边。
- center 把文本排列到中间。
- justify 实现两端对齐文本效果。
(3)其他
- height 高度: 像素,百分比
- width 宽度: 像素,百分比
- text-align:ceter 水平方向居中
- line-height 垂直方向根据标签高度
- font-size 字体大小
- font-weight 字体加粗
注: height不存在绝对的百分比，只存在相对的百分比，也就是说最外层的height无法设置百分比，只有父标签设置了height子标签才能设置
1 <!--__author__ = "wyb"--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>边框</title> 7 <style> 8 body{ 9 margin: 0 auto; 10 } 11 .c1{ 12 /*margin-left: 30px;*/ 13 width: 300px; 14 height: 100px; 15 border: 3px solid red; 16 /*设置字体大小*/ 17 font-size: 30px; 18 } 19 .c2{ 20 /*margin-left: 30px;*/ 21 width: 80%; height: 48px; 22 border: 3px dashed green; 23 /*左右居中(水平居中):*/ 24 text-align: center; 25 /*上下居中(垂直居中)*/ 26 line-height: 48px; 27 /*加粗*/ 28 font-weight: bold; 29 } 30 </style> 31 </head> 32 <body> 33 34 <div class="c1">ssfasfasf</div> 35 <br> 36 <div class="c2">sfasfasfasfwefv!</div> 37 38 </body> 39 </html>
效果如下：
2.边框
通过使用 CSS 边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素
边框设置：
- 宽度，样式，颜色 border: 4px dotted red;
- border-left,border-right,border-top,border-bottom
常用边框样式：
- dotted: 定义一个点线边框
- dashed: 定义一个虚线边框
- solid: 定义实线边框
1 <!--__author__ = "wyb"--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>边框</title> 7 <style> 8 body{ 9 margin: 0 auto; 10 } 11 p{ 12 margin-left: 30px; 13 width: 300px; 14 height: 100px; 15 } 16 .c1{ 17 border: 3px solid red; 18 } 19 .c2{ 20 border-top: 3px dashed green; 21 border-bottom: 3px dashed red; 22 border-left: 3px dotted #804761; 23 border-right: 3px dotted blue; 24 } 25 </style> 26 </head> 27 <body> 28 <p class="c1">这是一句话</p> 29 <br> 30 <p class="c2">最后一句话!</p> 31 </body> 32 </html>
效果如下：
3.float
4.display
5.padding、margin