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 不可继承样式:边框,内外边距的样式等
<head>
<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;
}
</style>
5 伪类选择器:
5.1 hover:当鼠标悬停在元素上时候选中元素添加样式 5.2 first-child:作为第一个子元素 5.3 last-child:作为最后一个子元素 5.4 nth-child(2):作为第几个子元素
<style>
#box:hover{
background: yellow;
color: #000;
}
li:last-child{
border: 1px solid firebrick;
}
li:nth-child(2){
background: blue;
}
</style>
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>