css：成为样式表，又称为级联样式表或者层叠样式表，css是控制网页的样式和布局。
格式：<style type="text/css">
选择器{属性名1:值1；属性名2：值2；}
规则：
- 必须位于<headd><title>标签的后面;
- style:css样式
- 选择器：用标签的名称来进行页面元素的选择,有标签选择器，id选择器，类选择器
标签属性：
color 颜色
font-size 字号，px代表像素大小
font-family 设置字体
text-align 文本对齐方式，默认left左对齐（不需要手动设置）
基础选择器
id 选择器：用标签中的id属性来进行选取,格式：#id值{color：；font-size: ;}
id命名规则：
1.不可以数字开头
2.不能包含中划线、下划线之外的符号
3.不建议使用中文
4.命名有意义，有备注功能
5.id命名要唯一，不可重复
6.每个标签只有这一组id
类选择器：名称可以重复，且class属性可以有多个值，这样同一个标签不同的class值可以设置不同的css样式
格式：.类名{xx}
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
必须位于title标签的后面
style:css样式
选择器{属性名1:值1；属性名2：值2；}
选择器：用标签的名称来进行页面元素的选择,有标签选择器,id选择器,类选择器
-->
<style type="text/css">
/*
color：颜色
font-size 字号，px代表像素大小
font-family 设置字体
text-align 文本对齐方式，默认left左对齐（不需要手动设置）
id选择器：用标签中的id属性来进行选取,格式：#id值{color：；font-size: ;}
类选择器：名称可以重复
id命名规则：
1、不可以数字开头
2.不能包含中划线、下划线之外的符号
3.不建议使用中文
4.命名有意义，有备注功能
5.id命名要唯一，不可重复
6.每个标签只有这一组id
*/
div {color:red;font-size:30px ;font-family: "黑体"; text-align: center;}
#p1{color: blue;font-size: 50px;}
.p2{color: orangered;}
.p3{color: brown;font-size: 50px;}
.sec{font-size:80px;}
span {color: green;}
</style>
</head>
<body>
<div>禅道</div>
<div>jira</div>
<p id="p1">功能测试</p>
<p class="p2">接口测试</p>
<p class="p3">性能测试</p>
<p class="p2 sec">安全测试</p>
<span>jmeter</span>
<span>loadrunner</span>
</body>
</html>
执行结果：
css引入的方式
其实，上面的示例都是将css样式和html写在同一个文件，这种称为内嵌式，css总共有3种引入方式，如下：
1，内嵌式：style写在title标签后面，html代码和ss代码在同一个文件，加载速度快，通常应用于电商网站首页，可一次加载html和css，
2， 外链式：css代码和HTML代码分开，使用link标签设置href属性，链接到css文件，后期维护方便
3，行内式：css代码写在标签属性里，修改不方便，重复代码太多，会导致页面加载速度变慢，不推荐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
内嵌式：style写在title标签后面，html代码和ss代码在同一个文件，加载速度快，通常应用于电商网站首页，可一次加载html和css，
外链式：css代码和HTML代码分开，使用link标签设置href属性，链接到css文件，后期维护方便
行内式：css代码写在标签属性里，修改不方便，重复代码太多，会导致页面加载速度变慢，不推荐
-->
<link rel="stylesheet" type="text/css" href="css文件.css"/>
</head>
<body>
<p>淘宝</p>
<p>京东</p>
<p>美团</p>
<p title="鼠标悬停出现的文字">拼多多</p>
<div style="color: green;">饿了么</div>
<div style="color: green;">盒马</div>
<div style="color: green;">闲鱼</div>
<span>电商</span>
<h1>阿里巴巴</h1>
<h1>京东</h1>
<h1>拼多多</h1>
<h2>支付宝</h2>
<h2>阿里云</h2>
<h3>钉钉</h3>
<h3>每日优鲜</h3>
<h3 id="car">滴滴</h3>
</body>
</html>
基础选择器权重
id选择器>类选择器>标签选择器
复合选择器
- 后代选择器：标签后面空格标签选择后代元素，其后面所有的子元素都会被选择
示例： div span{xxx} - 并列选择器：各种选择器用，连接，同时被选中设置css样式
- 标签指定式：标签.类名；标签和类名之间没有空格，选中符合该标签下类名的元素设置css样式
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
后代选择器：标签后面空格标签选择后代元素，其后面所有的子元素（子元素、子元素的子元素等）都会被选择
示例：
div span{xxx}
*/
/* p span{color: red;} */
div span{color: darkblue;font-size: 28px;}
/* 并列选择器：各种选择器用，连接，同时被选中设置css样式
*/
h1,.language,#test{color: #A52A2A;}
/* 标签指定式：标签.类名，标签和类名直接没有空格，选中符合该标签下类名的元素设置css样式 */
p.p2{color: aqua;}
</style>
</head>
<body>
<div>
<span>测试</span>
<p>
<span>UI</span>
</p>
<p class="p2">功能测试</p>
</div>
<h1>java</h1>
<div id="test">html</div>
<span class="language">python</span>
</body>
</html>
复合选择器权重
参考基础选择器权重：id选择器>类选择器>标签选择器，id选择器权重值可赋为100，类选择器为10，标签选择器1，复合选择器则是基础选择器权重叠加，权重相同时，以最新设置优先；
引入方式对比：
- 行内css样式权重最高；
- 外链css样式与内嵌css样式权重相同，以最新设置优化；
css样式的常用属性
font-weight:设置字体粗细；bold：字体加粗；normal：正常；
font-style:设置字体是否倾斜；italic：字体倾斜；normal：正常
text-decoration:设置字体的线；underline：文字下加下划线；line-through:文字加删除线；none：不设置
word-break:break-all 设置强制英文换行
:hover 伪类，代表鼠标悬停时候的样式
示例(截取部分)：
#test{font-weight: bold;}
....
<div id="test">html</div>
<span class="language">python</span>
<br>
<!-- a标签默认下环线 -->
<a href="###">我是a标签</a>
<h3>默认英文不换行，aaaaaaaa中文自动换行bbbbcccc三生三世十里桃花ssssss</h2>
执行效果：
其中a标签，默认蓝色带下划线；h3标签中文自动换行；设置css样式如下：
#test{font-weight: bold;}
h3{width:400px;height:200px;background-color: antiquewhite;font-style: italic;word-break: break-all;}
a{text-decoration: none;}
a:hover{color: green;}
执行效果如下：
盒子属性
width：宽度；height：高度
border:边框
padding：内间距，边框与内容间距；
margin：外边距，盒子与盒子之间的距离
position伪类
- fixed
- relative
- absolute
2133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
