css(cascade style sheet)层叠式样式表，用来美化HTML网页。
颜色的表示方式：
（1) 16进制：格式 #(红绿蓝) 范围：000000~FFFFFF
（2) rgb: 格式(红色，绿色，蓝色) 范围：0~255 由于是自发光 白rgb色为：rgb(255,255,255) 黑色为：rgb(0，0，0)
（3) rgba: 格式(红色，绿色，蓝色，0.0~1.0) 其余色与rgb颜色范围一样。最后的a为透明度，0.5为半透明。
颜色相关的样式：前景色，背景色，背景图。
1.前景色（color）
2.背景色 （background-color）
3.背景图（background-image：url) (图片地址)
background-repeat：no-repeat（不重复） repeat-x repeat-y 在哪个轴上重复
<html> <head> <meta charset="UTF-8"> <title>Title</title> <style> #p1{ background-image: url("1.png"); background-repeat:no-repeat} </style> </head> <body id="p1"> <p style="color: red;">段落1</p> <p style="color: #000000;">段落2</p> <p style="background-color: #4f6f22">段落3</p> </body> </html>
盒子模型:外边距（margin），边框（border），内边距（padding），内容。内间距又有 padding-left 左， padding-right 右 ，padding-top 上，padding-bottom 下，外边距也一样有这四个属性。如下图：
定位方式：
position：absolute；绝对定位 left: x 轴的坐标 top: y 轴的坐标 z-index z 轴坐标 取值越大，越靠上。
也可以控制大小：width: 宽度 height: 高度
注意：坐标的原点在左上角
<html> <head> <meta charset="UTF-8"> <title>Title</title> <style> #p{ position: absolute; left:100px;top: 100px;} </style> </head> <body> <div id="p"><p>正文</p></div> </body> </html>
字体相关：
font-size : 字体大小 font-family: 字体种类 font-weight: bold; 加粗
font-style:italic; 倾斜 text-decoration: line-through 贯穿线 text-decoration: underline 下划线注意：设置字体种类时，电脑上事先需要有这个字体，可以在word里面查看自己电脑里面装了哪些字体。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #p1{ font-size: 5px} #p2{ font-family: 楷体} #p3{font-style: italic} #p4{ font-weight:bold} #p5{ text-decoration: line-through } #p6{ text-decoration: underline } </style> </head> <body> <p id="p1">1张三</p> <p id="p2">2李四</p> <p id="p3">3王五</p> <p id="p4">4赵六</p> <p id="p5">5周七</p> <p id="p6">6吴八</p> </body> </html>
显示隐藏：显示，隐藏 就是可以把某些内容或者控制格式等隐藏起来，达到一定条件再显示。
display: block; 显示 display: none; 隐藏
样式表：
1. 类选择器：.名字 之后使用标签的 class="名字引用"2. ID选择器：#id值 之后使用标签的 id="id值"
3. 元素选择器：根据标签的名字进行匹配
注意：优先级: 如果不同的选择器匹配到了同一个元素
（1）style属性定义的样式最高，id选择器优先级次之，类选择器次之，元素选择器最低
（2）同级选择器，后定义的优先
（3）可以用 !important 改变优先级，可以把优先级提升到最高
4. 父子选择器：格式 父标签>子标签
比如：找到一个p标签，并且它的父标签必须是div div>p {color:red;}
5. 祖先后代选择器：格式 祖先标签 后代标签
比如：找到一个p标签，只要它再div标签中 div p {color:red;}
6. 伪类选择器：按钮 鼠标移入改变样式，鼠标移除还原。结合前5个选择器使用。
:hover 移入 :hover 移入 :last 匹配选中的最后一个 :focus 获取焦点时
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .p1{color:red} p{color: black} #p2{color: #3385ff} ul>li{color:darkblue} </style> </head> <body> <p class="p1">111111111111</p> <p>2222222222222222</p> <p id="p2">3333333333333333</p> <ul> <li>4444444444444444</li> <ol> <li>5555555555555555</li> <li>6666666666666666</li> </ol> </ul> </body> </html>
扫一扫
3284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
