css的三种书写方式
行内样式
<div style="color: pink;">熊二</div>内嵌样式
<head> <meta charset="UTF-8"> <title>Document</title> <style> div { color: blue; } </style> </head>外联样式（外链样式）
<head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="样式.css"> </head> <body> <div>熊大与熊二</div> </body>
颜色属性
颜色的值的三种表示方式
使用表示颜色的单词
十六进制表示法 0-9 a-f
color: #nn nn nn;n的取值：0-9, a-f （推荐使用）rgb表示法 rgb(n,n,n) n的取值： 0-255
color: red;
color: #00ab22;*/
color: rgb(255,0,0);*/字体属性
font-size：设置字体大小
font-style：设置字体样式
font-weight：设置字体粗细
font-size: 100px;
font-style: italic; /*设置字体倾斜*/
font-weight: bold; /*加粗字体*/
font-weight: bolder;/*更粗字体*/
font-weight: lighter;/*细字体*/
font-weight: 100; /*注意：font-weight的值设置的是数字的时候，一定不要带单位*/字体属性简写：
/*写法：*/
font: font-style font-weight font-size font-family;
/*示例：*/
font: 600 italic 50px 'simsun'注意：
1.font简写的时候font-size和font-family一定要写，而且位置必须是font-size在前font-family在后
2.font-style和font-weight的位置可以变，但是只能在 font-size的前面。而且可有可无
文本相关属性
文本水平居中
text-align: center;
/*text-align: right;*/
/*text-align: left;*/文本首行缩进
/* px：一个单位： em：相对长度单位*/
text-indent: 80px;
text-indent: 2em;文本修饰线
text-decoration: underline; /* 下划线*/
/*text-decoration: overline; 上划线*/
/*text-decoration: line-through; 中划线*/css中选择器
- 基础选择器（简单选择器）
- 标签选择器
- 类选择器
- id选择器
- 通配符选择器（通用选择器）
- 复合选择器（将标签选择器、类选择器、id选择器通过一定的规则组合起来的新的选择器）
- 后代选择器
- 子代选择器
- 并集选择器
- 交集选择器
标签选择器
将标签名作为选择器的名称，标签选择器会选择页面上所有的这一类标签
<style>
h1 {
color: pink;
}
div {
color: blue;
}
</style>类选择器
类选择器的特点：
1.一个元素可以同时拥有多个类名
2.一个类可以被多个元素同时使用
作用范围：在页面上拥有这个类名的元素
.pink {
color: pink;
}
.blue {
color: blue;
}
.font {
font-size: 50px;
font-weight: 600; /*skyblue*/
}id选择器
#one {
color: blue;
}通配符选择器
* {
color: pink;
}后代选择器
.father span {
color: pink;
}子代选择器
.father>span {
color: green;
}并集选择器
div,span,.one,a {
color: pink;
font-size: 50px;
}交集选择器
p.one {
color: pink;
font-size: 100px;
}
伪类选择器
链接伪类选择器：
:link （链接 ） 只对a标签有效
:visited (已经被访问了) 只对a标签有效
:hover (悬停) 对所有的元素有效
:active (激活) 对所有的元素有效
span:hover {
color: purple;
}
目标伪类选择器：
当带点击a标签时，此时页面会滚动条会定位到id为对应的id的段落处，此时的目标就是h3，或者h2，当点击哪一个连接时候对应id的元素就会被选中。
<style>
/*target {
属性：属性值;
}*/
h3:target {
color: pink;
font-size: 30px;
}
</style>
<body>
<ul>
<li><a href="#personInfo">个人信息</a></li>
<li><a href="#childLife">早年经历</a></li>
</ul>
<h3 id="personInfo">个人信息</h3>
<p>张钧甯（Ning Chang），1982年9月4日出生于德国，毕业于台湾中央大学产业经济研究所法律组硕士班，华语影视女演员。
2002年，张钧甯参演个人出道作品《流星花园Ⅱ》。2006年，因主演医疗剧《白色巨塔》而被观众熟知 [1] 。2008年，张钧甯凭借伪纪录片《情非得已之生存之道》获得第10届台北电影节最佳女演员奖。2009年，她主演的警匪剧《痞子英雄》在台湾播出。2013年，凭借爱情剧《最美的时光》获得更多关注 [2] 。
2014年，主演警匪片《痞子英雄：黎明升起》 [3] 。2015年，凭借古装剧《武媚娘传奇》获得时尚星秀人物盛典度最具突破女演员 [4] ；同年，由其主演的武侠剧《少年四大名捕 》在湖南卫视首播 [5] 。2016年，她出演了宫斗剧《如懿传》 [6] 。2017年，主演民国传奇女性剧《女管家》 [7] 与青春爱情电影《六人晚餐》相继上映 [8] 。2018年，主演都市情感剧《温暖的弦》 [9] ，凭借《虎啸龙吟》获第24届华鼎奖中国百强电视剧最佳女配角 [10] 。</p>
<h2 id="childLife">早年经历</h2>
<p>张钧甯出身于书香门第。在德国慕尼黑出生，成长于台湾。2000年，十八岁的她考入台北大学历史系，大二转入法律系就读。随后，她在一次西门町逛街时，接受工读生的邀请填写问卷，几个月后工读生成为艺人经纪助理时想到充满学生气息的张钧甯，她便在这机缘巧合下进入了演艺圈。起初，她以拍摄音乐录音带及广告为主 [11-12] 。</p>
<body>
结构伪类选择器：
从HTML的结构上去选择元素。
语法：
选择器:first-child 选择第一个子元素
选择器:last-child 选择最后一个子元素
选择器:nth-child(n) n:表示的是选择的是第几个子元素（只看元素的位置和元素本身无关）
选择器:nth-last-child(n) n:表示的是选择的是第几个子元素（只看元素的位置和元素本身无关） 从后往前数
常用方法：
/**选择第一个li元素和最后一个li元素**/
li:first-child {
color: pink;
font-size: 20px;
}
li:last-child {
color: pink;
}
li:nth-child(1),li:nth-child(2) {
color: blue;
}
/**选择第奇数或偶数个元素**/
li:nth-child(2n+1) {
color: pink;
font-size: 50px;
}
li:nth-child(odd) {
color: pink;
}
li:nth-child(even) {
color: blue;
}
.one li:nth-child(2n) {
color: pink;
}
/**选择第二个div元素**/
div:nth-child(2) {
color: blue;
}
/**选择父ID为boxx的第四个div元素**/
.boxx p:nth-child(4) {*/
color: pink;
}
/**选择第四个p元素**/
.p:nth-child(4) {
color: pink;
}
元素常见的三种显示方式
- 行内元素
- 块级元素
- 行内块级元素
行内元素
行内元素： display:inline
特点：
1.一行可以显示多个
2.大小由内容决定
3.不能设置有效宽高
常见行内元素： span、em、a、img
img是一个特殊的行内元素，可以设置有效宽高
块级元素
块级元素： display：block
特点：
1.独占一行
2.可以设置有效宽高
常见的块级元素： h1-h6、p、div、ul、li、ol、dl、dt、dd
行内块级元素
行内块级元素： display：inline-block
特点：
1.一行可以显示多个
2.可以设置有效宽高
常见的行内块级： input、textarea、select