一、CSS样式规格
选择器：
标签选择器
类选择器
多类名选择器
id选择器
id选择器与类选择器区别：
类选择器可以多次重复使用，id选择器只能使用一次，是唯一的
通配符选择器
二、CSS3外观属性
水平对齐 text-align:
首行缩进 text-indent:1em; 1代表一个汉字的缩进
字间距 letter-spacing:1px
单词间距 word-spacing:1px; 对中文无效
颜色半透明 color:rgba(r,g,b,a) a是透明的意思，取值0~1之间
文字阴影 text-shadow:1px 2px 3px rgba(0,0,0,0.2)
水平距离 垂直距离 虚实变化 阴影颜色
新闻小案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>综合案例一</title>
<style>
body {
color: #3c3c3c;
}
h1 {
font-weight: normal; /*不让字体加粗*/
text-align: center;
}
div {
text-align: center;
}
.xin {
color: #ff0000;
}
a:hover {
color: red; /*伪类选择器 鼠标放上变颜色*/
}
p {
text-indent: 2em; /*首行缩进*/
letter-spacing: 1px; /*字间距*/
font-size: 14px;
line-height: 23px;
}
em {
font-style: normal; /*不让字体倾斜*/
color: skyblue;
}
</style>
</head>
<body>
<h1>
中乙队赛前突然换帅仍胜毅腾 高原黑马欲狙击舜天
</h1>
<div>
2017年7月1620：11
<span class="xin">新浪体育 评论中大奖（11人参与）</span> <a href="#" class="shou">收藏本文</a>
</div>
<hr />
<p>新浪体育新浪体育新浪体育<em>新浪体育</em>新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育</p>
<p>新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育</p>
<p>新浪体育新浪体育新浪体育<em>新浪体育</em>新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育</p>
<p>新浪体育新浪体育新浪体育<em>新浪体育</em>新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育</p>
<p>新浪体育新浪体育新浪体育新浪体育新浪体育<em>新浪体育</em>新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育新浪体育</p>
</body>
</html>
网页显示：
三、标签显示模式
1、行内样式表 直接写在标签内部
<div style="color: red; font-size:12px;">通过标签的style属性修改样式</div>
2、内部样式表 写在head内部里面的样式
<style type="text/css"></style>
3、外部样式表 将所有的样式放在一个或多个.css的文件中
html文件
<div class="demo"></div>
css文件
.demo {
color: red;
}
使用link标签引入到html文件中
<head>
<link href="css文件的路径" type="text/css" rel="stylesheet">
</head>
4、行内模式块转换
首先行内元素跟块级元素的区别：
块级元素是独占一行，可以设置宽高
行内元素是可以多个标签存在一行，只能容纳文本和其他元素，不能设置宽高（a特殊）
display:inline 把块级标签转换为行内标签显示模式
<head> <style type="text/css"> div { width: 200px; height: 200px; background-color: red; display: inline;/*块级标签转换为行内标签*/ } </style> </head> <body> <div> 遗产继承不如白手起家 </div> <div> 遗产继承不如白手起家 </div> </body>
display:block 把行内标签转换为块级标签显示模式
<head> <style type="text/css"> span { width: 200px; height: 200px; background-color: red; display: block; /*行内标签转换为块级标签*/ } </style> </head> <body> <span> 遗产继承不如白手起家 </span> <span> 遗产继承不如白手起家 </span> </body>
display:inline-block 把块、行内标签转换为行内块标签显示模式
<head> <style type="text/css"> a { width: 200px; height: 200px; background-color: red; display: inline-block; /*把块、行内标签转换为行内块标签显示模式 */ } </style> </head> <body> <a href="#"> 遗产继承不如白手起家 </a> <a href="#"> 遗产继承不如白手起家 </a> </body>
四、复合选择器 {
交集选择器
并集选择器
后代选择器
子元素选择器 加>不能操作第三层元素
属性选择器
伪元素选择器
}
属性选择器
1、使用[ ] 表示，存在属性就可以
<head> <style type="text/css"> a[title] { /*使用 [ ] 表示*/ color:red; } </style> </head> <body> <a href="#" title="我是第一"> 遗产继承不如白手起家 </a> <a href="#" title="我是第二"> 遗产继承不如白手起家 </a> </body>
2、属性值等于val，添加属性值
<head> <style type="text/css"> a[title] { color:red; } input[type=text] { /*属性值等于val值*/ color:skyblue; } </style> </head> <body> <a href="#" title="我是第一"> 遗产继承不如白手起家 </a> <a href="#" title="我是第二"> 遗产继承不如白手起家 </a> <a href="#">第三</a> <a href="#">第四</a> <input type="text"/> <input type="text"/> <input type="submit"/> <input type="submit" /> <input type="button"/> </body>
3、^= 表示属性值=val值开头位置
<style type="text/css"> div[class^=font] { /* ^= 表示font 开头的颜色变为红色 */ color:red; } </style> </head> <body> <div class="font1">我是第一</div> <div class="font2">我是第二</div> <div class="font3">我是第三</div> <div class="font4">我是第四</div> <div class="sub1">你猜我第几</div> <div class="sub3">你猜我第几</div> </body>
4、$= 表示属性值=val值结束位置
<style type="text/css"> div[class$=footer] { /* $= 表示结束位置的颜色变为红色 */ color:red; } </style> </head> <body> <div class="jd-footer">我是第一</div> <div class="tb-footer">我是第二</div> <div class="font3">我是第三</div> <div class="font4">我是第四</div> <div class="sub1">你猜我第几</div> <div class="sub3">你猜我第几</div> </body>
5、*= 表示任意位置
<style type="text/css"> div[class*=tao] { /* *= 表示在任意位置的tao 属性颜色都变为红色 */ color:red; } </style> </head> <body> <div class="jd-tao-footer">我是第一</div> <div class="tao-tb-footer">我是第二</div> <div class="font3-tao">我是第三</div> <div class="font4">我是第四</div> <div class="sub1">你猜我第几</div> <div class="sub3">你猜我第几</div> </body>
伪元素选择器
.demo 类选择器
:first-child 伪类选择器
::first-letter 伪元素选择器
<style type="text/css"> div::first-letter { /*选择第一个字大小为50，颜色为红色*/ color:red; font-size:50px; } div::first-line { /*选择第一行颜色为天蓝*/ color:skyblue; } </style> </head> <body> <div class="jd">我是第一我是第一我是第一我是第一我是第一我是第一我是第一我是第一我是第一我是第一我是第一我是第一我是第一我是第一我是第一我是第一我是第一</div> </body>
::before 在盒子里面内容前面添加 ::after 在盒子里面内容后面添加
<style type="text/css"> div::before { content:"前面添加的内容"; } div::after { content: "我是后面添加的内容"; } </style> </head> <body> <div class="jd">我是第一我是第一我是第一我是第一我是第一我是第一我是第一我是第一我是第一我是第一我是第一我是第一我是第一我是第一我是第一我是第一我是第一</div> </body>