一、CSS样式书写方式
1. 行内样式表（内联样式）
<body> <h5 style="color: pink; font-size: 25px;">抓紧学习</h5> </body>
2. 内部样式表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> <style> #test { color: #ccc; font-size: 25px; } </style> </head> <body> <h5 id="test">内部样式表测试</h5> </body> </html>
3. 外部样式表（外链式）
外部样式表
test.css
div {
color: pink;
font-size: 25px;
}
test.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> <link rel="stylesheet" href="test.css"> </head> <body> <div>外部样式表测试</div> </body> </html>
二、CSS样式规则
选择器 {属性:值;}
1. CSS基础选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> <style> /*标签选择器：可以把某一类标签全部选择出来*/ div { color: pink; } /*类选择器*/ .test { color: gray; } /*多类名选择器*/ .font25 { font-size: 25px; } /*id选择器：id在页面中是唯一的，而class无限制*/ #test_id { color: green; } /*通配符选择器：*代表所有字符；？代表一个字符*/ /* * { color: red; }*/ </style> </head> <body> <div>测试标签选择器</div> <!-- 多类名 --> <div class="test font25">测试类选择器</div> <p id="test_id">测试id选择器</p> </body> </html>
2. 后代和子代选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> <style> /*后代选择器：外层标签写在前面，内层标签写在后面，中间用空格隔开*/ div p{ /*div标签下的所有p标签*/ color: pink; } .version p { font-size: 25px; } ul li > a{ /* > 直接子代选择器：此处只能选择下面的“一级菜单”*/ color: #daa520; } </style> </head> <body> <div>C语言</div> <div>JAVA</div> <div>Python</div> <div class="version"> <p> python 2.7</p> </div> <div> <p> python 3.6</p> </div> <p> python 2.7</p> <p> python 3.6</p> <ul> <li> <a href="#">一级菜单</a> <div> <a href="#">二级菜单1</a> <a href="#">二级菜单2</a> <a href="#">二级菜单3</a> </div> </li> </ul> </body> </html>
3. 并集和交集选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> <style> /*交集选择器：第一个为标签选择器，第一个为类选择器，如 xx.xx，不推荐使用*/ div.red { color: red; } /*并集选择器：各选择器之间用，隔开*/ span, h1 { color: green; } </style> </head> <body> <div class="red">交集选择器1</div> <!--将此处文字改成红色--> <p class="red">交集选择器2</p> <span>并集选择器</span> <!--将此处文字改成绿色--> <h1>并集选择器</h1> <!--将此处文字改成绿色--> <a href="#">并集选择器</a> </body> </html>
4. 伪类选择器
伪类选择器以 ：开头
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> <style> /*链接伪类选择器：顺序不能改变*/ a:link{ /*未访问的链接*/ color: #3c3c3c; font-size: 24px; text-decoration: none; font-weight: 700; } a:visited{ /*已访问的链接*/ color: orange; } a:hover { /*鼠标悬停到该链接上*/ color: #f10215; } a:active{ /*选定的链接：鼠标按下时的样式*/ color: green; } /*实际开发中使用以下即可*/ /* a{ color: #3c3c3c; font-size: 24px; text-decoration: none; font-weight: 700;
background-image: url(test.png); } a:hover { color: #f10215; }*/ </style> </head> <body> <a href="https://www.baidu.com">百度</a> </body> </html>
三、CSS样式属性
1. 字体相关样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> <style> .test_font1 { /*字号大小，em 相对于当前对象内文本的字体尺寸；px 像素；现在网页中普遍使用14px+，尽量使用偶数*/ font-size: 24px; /*字体*/ font-family: "microsoft yahei"; /*font-family: "微软雅黑";*/ /*字体加粗:normal、bold、bolder、lighter、number，建议用数字*/ font-weight: 800; /*字体风格: normal、italic 斜体...*/ font-style: italic; } /*字体样式连写顺序 font-style、font-weight、font-size/line-height、font-family 各个属性用空格隔开，不需要的属性可以省略，但font-size、font-family不能省略*/ .test_font2 { font:normal 400 28px "宋体"; } </style> </head> <body> <div class="test_font1">字体样式</div> <div class="test_font2">字体连写样式</div> </body> </html>
2. 文本相关样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> <style> .test1 { color: #FF0000; line-height: 28px; /*行高*/ text-align: left; /*文字水平对齐方式：left、right、center*/ text-indent: 2em; /*段落首行缩进：1em是一个字的距离*/ text-decoration: underline; /*文本装饰：none | underline 下划线 | blink 闪烁| overline 上划线| line-through 贯穿线(删除线)*/
} </style> </head> <body> <p class="test1">测试文本样式1</p> <p class="test2">测试文本样式2</p> </body> </html>
四、标签显示模式
1. 块级元素
块级元素通常独自占据一整行或多行，可以对其设置高度、宽度（宽度默认是容器的100%）、对齐等属性，常用于网页布局和网页结构的搭建，里面可以放其它的款块级元素和行内元素。
常见的块元素：<h1>-<h6>、<p>、<div>、<ul>、<ol>、<li>等，div是最典型的块元素。
2. 行内元素
行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度等属性，常用于控制页面中文本的样式。
常见的行内元素：<a>、<strong>、<b>、<span>等，其中span标签是典型的行内元素。
行内元素只能容纳文本或其它行内元素，<a>除外，<a>中可以容纳块级元素。
3. 行内块元素
在行内元素中，有几个特殊的标签<img>、<input>、<td>，可以对它们设置宽高和对齐属性，有些资料将其称为行内块元素。
4. 标签显示模式转换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> <style> div { width: 100px; height: 100px; background-color: pink; display: inline; /*把块级元素转换为行内元素*/ } span { width: 50px; height: 50px; background-color: purple; display: block; /*把行内元素转换为块元素*/ } a { width: 50px; height: 50px; background-color: pink; display: inline-block; /*把行内元素转换为行内块元素*/ } </style> </head> <body> <div>123</div> <div>123</div> <span>abc</span> <span>abc</span> <a href="#">百度</a> <a href="#">百度</a> </body> </html>
注意：
1. 文字类块级标签如<p>里面不能放其它的块级元素；
2. 链接里面不能再放链接；