1 使用方式
为元素设置样式使用css
css层叠样式表：相同的样式多个，会覆盖；不同的样式多个，会叠加；
1.1 行内样式表：在元素的开始标签上添加添加一个style属性，样式定义在style属性值中
1.2 内部样式表：head中定义style标签对，标签对中定义css样式
1.3 外部样式表：在外部定义一个css文件，在要使用的html中通过link标签引入
1.4样式表的优先级：优先显示谁，就近原则（李元素近）
1.5路径：回到上一层…/
进入某一个路径 路径名/
2 基础选择器
2.1 #id 选择器：根据元素id属性值，选中一个元素
2.2 .class 类选择器：根据元素的class属性值，选中一个或者组员元素（元素的class属性值可以相同，并且值列表可以存在多个值）
2.3 标签|元素选择器：根据标签名选中一个或者一组元素
2.4 *通配符：选中所有元素
2.5 基础选择器的优先级；id>class>元素>通配符
2.6 群组选择器：通过多种选择器匹配到多个元素同时选中
<style>
/*id选择器*/
#box{
border: 1px solid fuchsia;
background: skyblue;
}
/*.class|类选择器*/
.green{
background: green;
}
.red{
color: red;
}
/*元素选择器*/
div{
font-size: 30px;
background: palevioletred;
}
/*通配符*/
/* 去除浏览器的默认样式 : 内外边距*/
*{
margin: 0;
padding: 0;
}
/*群组选择器*/
#box,.red,p{
font-style: italic; /*斜体*/
}
ul,ol{
background: red;
}
</style>
</head>
<body>
<div id="box">div1</div>
<div class="green red">div2</div>
<p class="green">p</p>
<ul>
<li>1</li>
<li>2</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
</ol>
</body>
3 组合选择器
3.1 后代选择器 空格
3.2 子元素选择器 >
选中第一层直接子元素，不包含孙子元素等
3.3 相邻兄弟 +
3.4 普通兄弟~
3.5 样式；
3.5.1 可以继承的样式；字体样式 文本样式 背景样式等。。。
3.5.2 不可继承样式：边框，内外边距的样式等
<style>
/*后代选择器 空格*/
li{
font-size: 24px;
}
ul li{
background: darkgoldenrod;
}
/*选中所有body中的div*/
/*body div{
border: 1px dotted blue;
}*/
/*子元素选择器*/
body>div{
border: 1px dotted blue;
}
/*相邻兄弟*/
/*.first+li{
color: paleturquoise;
}*/
/*普通兄弟*/
.first~li{
color: paleturquoise;
}
</style>
</head>
<body>
<ul>
<li class="first">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
</ol>
<div id="box">
box
<div class="item">
box的子元素item
<div>孙子元素div</div>
</div>
</div>
</body>
4 属性选择器【】
4.1 根据元素的属性与属性值U型暗中一个或者一组元素
4.1.1【属性名】：包含这个属性的元素被选中
4.1.2 元素名【属性名】：指定元素中具有这个属性的元素被选中
4.1.3 元素名【属性名=‘属性值’】：指定元素中具有这个属性并且属性值为定值的元素被选中
<style>
/*具有class属性的就被选中*/
/*[class]{
background: plum;
}*/
/*所有的li标签标签中具有class属性的被选中*/
/*li[class]{
background: plum;
}*/
/*li标签中有class属性并且属性值为item的被选中*/
li[class='item']{
background: plum;
}
#box{
width: 200px;
height: 200px;
background: red;
border-radius: 100px;
color: #fff;
font-size: 20px;
text-align: center;
line-height: 200px;
}
5 伪类选择器：
5.1 hover：当鼠标悬停在元素上时候选中元素添加样式
5.2 first-child：作为第一个子元素
5.3 last-child：作为最后一个子元素
5.4 nth-child（2）：作为第几个子元素
#box:hover{
background: yellow;
color: #000;
}
li:last-child{
border: 1px solid firebrick;
}
li:nth-child(2){
background: blue;
}
```
```html
在这里插入代码片
6 其他样式
6.1 字体文本样式
6.1.1 text-align 水平对齐方式
center（居中）
left（左对齐）
right（右对齐）
元素中的内容在元素的宽度中的水平对齐方式
对行内元素无效
6.1.2 text-decoration
规定添加到文本的修饰，属性值：none（去除下划线），underline，overline（上划线），line-through
6.1.2 test-indent 设置文本首行缩进
font-size 字体大小
font-family 文本字体，该属性设置文本的字体
font-style 字体风格
font-weight 字体加粗：
100~700 正常
700~900 加粗
bold 加粗
bolder 加粗
lighter 正常 normal
<div>div</div>
<span>你好</span>
<a href="#">你好</a>
<p>字体文本样式
text-align 水平对齐方式
元素中的内容在元素的宽度中的水平对齐方式
对行内元素无效
text-decoration
规定添加到文本的修饰，属性值：none、underline、overline、line-through字体文本样式
text-align 水平对齐方式
center（居中），left（左对齐），right（右对齐）
元素中的内容在元素的宽度中的水平对齐方式
对行内元素无效
text-decoration
规定添加到文本的修饰，属性值：none、underline、overline、line-through字体文本样式
text-align 水平对齐方式
center（居中），left（左对齐），right（右对齐）
元素中的内容在元素的宽度中的水平对齐方式
对行内元素无效
text-decoration
规定添加到文本的修饰，属性值：none、underline、overline、line-through</p>
</body>
6.2 背景样式 background
6.2.1 背景颜色 background-color
6.2.2 背景图片 background-image
6.2.3 背景图片是否平铺 background-repeat
6.2.4 背景图片的大小 background-size
6.2.5 背景图片的位置 background-position
6.3 背景复合属性：background ：顺序，个数可以任意改变
<style>
div{
width: 500px;
height: 500px;
border: 10px solid #000;
/*背景样式*/
background-color: pink;
background-image: url("images/img.png");
background-repeat: no-repeat;
/*background-repeat: repeat-y;*/
background-size: 100px;
background-position: center;
background-position: center top;
background-position: right bottom ;
background-position: 200px 300px;
background: url("images/img.png") no-repeat center cyan;
background-size: 200px;
background: red;
}
</style>
7：定位：position
position 需要配合方向值一起使用 top，left，right，bottom
7.1 相对定位 relative
a:相对于元素原位置进行定位；
b:在文档流中位置没有改变，只是显示上的不同；
7.2 绝对定位 absolute
a；相对于浏览器的窗口进行定位，定位到文档中某个位置，不会改变；
b:子父级定位
当父级元素上有设置position：relative，当前元素的绝对定位就是相对与父级进行定位
7.3 固定定位 fixed
定义在窗体的某个不会改动
绝对定位于固定定位是完全脱离文档流的定位方式
<head>
<meta charset="UTF-8">
<title>定位</title>
<style>
#box{
height: 1600px;
width: 500px;
border: 5px solid red;
/*父级: 相对定位*/
position: relative;
margin: 0 auto; /*块元素水平居中*/
}
#box div{
width:100px ;
height: 100px;
}
.item1{
background: yellow;
}
.item2{
background: greenyellow;
/*相对定位*/
position: relative;
top: -100px;
left: 100px;
}
.item3{
background: pink;
/*绝对定位*/
position: absolute;
right: 0;
bottom: 0;
}
.item4{
background: paleturquoise;
/*固定定位*/
position: fixed;
top: 300px;
right: 0;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="box">
<div class="item1">div1</div>
<div class="item2">div2</div>
<div class="item3">div3</div>
<div class="item4"><a href="#top">回到顶部</a></div>
</div>
</body>
</html>
8 导航
个人博客网站的导航
8.1display：
8.1.1 none 元素消失
8.1.2 block 块元素
8.1.3 inline 行内元素
8.1.4 inline-block 行内块
a:具有行内与块的特点
b：宽度有内容撑起
c:设置宽高
d:设置上下左右内外边距
e：可以和其他元素同行显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航</title>
<style>
/*清除浏览器默认样式*/
*{
margin: 0;
padding: 0;
}
ul{
list-style: none; /*去除列表项标记*/
}
ul li{
/*为了让块元素同行显示*/
display: inline-block;
width: 25%;
height: 50px;
/*内容在元素的宽度的水平居中*/
text-align: center;
line-height: 50px;
background: black;
}
li a{
color: #fff;
font-size: 20px;
text-decoration: none; /*去重下划线*/
}
li a:hover{
color: pink;
}
li:hover {
border-bottom: 5px solid pink;
}
</style>
</head>
<body>
<ul>
<li><a href="#">我的首页</a></li><li><a href="#">我的相册</a></li><li><a href="#">我的说说</a></li><li><a href="#">我的音乐</a></li>
</ul>
</body>
</html>
146
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
