前端之CSS
1. CSS概述
我们在写好了html标签之后，需要定位到这些标签，然后对这些作出对应的色彩、样式的渲染，才能呈现出美观的效果。
那么，这些内容就是css所要完成的事情了。
2. 四种CSS代码的引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--css中文称为层叠样式表，用来控制网页数据的表现-->
<!--链接式引入css文件-->
<link href="test1.css" rel="stylesheet">
<!--导入式引入css文件-->
<style>
@import "test2.css"; /* 这样会出现短暂的无渲染的html框架，然后再出现css渲染 */
</style>
<!--通过头文件的方式引入css代码-->
<style>
p{
color: rebeccapurple;
font-size: 40px;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<!--通过直接在标签中写style属性来引入css代码-->
<div style="color: red;background-color: green;height: 100px">hello hgzerowzh</div>
<a href="https://cdn.jsdelivr.net/gh/hgzerowzh/blog_website/data/image/wechat_code_money.png" target="_blank">资助一下</a>
<p>shit</p>
</body>
</html>3. CSS选择器
3.1 CSS标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
color: red;
}
div{ /* 这是一个标签选择器 */
color: yellow;
}
#little_p{ /* 这是一个id选择器 */
background-color: blue;
}
.the_p{ /* 这里表示一个类选择器 */
color: aqua;
}
div.cuihua{ /* 这种选择器表示一个名叫cuihua的div标签(找一个标签) */
color: greenyellow;
}
#little_p, div.cuihua{ /* 这里表示一个多重选择器, 表示并列的关系 */
color: rebeccapurple;
}
.div1 .div2{ /* 这是一个层级选择器 ，div1下面的div2标签 */
color: darkred;
}
.div1>.div2{ /* 这是一个子代选择器，只找div1的子代元素标签 */
color: #000;
}
.div1 + div{ /* 毗邻选择器，找div1相邻的(要紧挨着它)下一个div标签 */
color: greenyellow;
}
</style>
</head>
<body>
<div>hello div</div>
<p id="little_p">ppp</p>
<p class="the_p">pp</p>
<p>p</p>
<a href=""></a>
<div class="cuihua">翠花</div>
<div class="before_div1">
before div1
</div>
<div class="div1">
<div class="div2">
<a href="">a</a>
<p>pp</p>
<div>div3</div>
</div>
</div>
<div class="after_div1">
after div1
</div>
</body>
</html>3.2 CSS属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[alex]{
color: red;
}
[alex=‘dsb‘]{ /* 这是一个自定义的属性选择器 */
color: greenyellow;
}
p[alex=‘dsb‘]{ /* 这个属性选择器只选择alex等于dsb的p标签 */
color: blue;
}
[alex~="LI"]{ /* 匹配所有alex属性具有多个空格分隔的值，其中一个值等于LI的元素 */
color: pink;
}
[alex^="LI"]{ /* 匹配alex属性中以LI开头的元素(只要以LI开头就ok，不管是LIab还是LIbc都匹配) */
color: pink;
}
[alex$="LI"]{ /* 匹配alex属性中以LI结尾的元素 */
color: pink;
}
[alex*="LI"]{ /* 匹配alex属性中包含LI的元素(只要属性值中包含LI就ok) */
color: pink;
}
</style>
</head>
<body>
<div alex="sb">alex_sb</div>
<div alex="dsb">alex_dsb</div>
<p alex="dsb">这是一个p标签</p>
<div alex="sb LI">alex</div>
</body>
</html>3.3 CSS伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link{ /* 什么操作都不做时显示什么颜色 */
color: red;
}
a:visited{ /* 这个伪类表示访问过这个a标签后显示什么颜色 */
color: blue;
}
a:hover{ /* 这里表示鼠标悬浮在这个a标签上方时显示什么颜色 */
color: green;
}
a:active { /* 点击这个a标签时显示什么颜色 */
color: yellow;
}
.box:hover .top{
background-color: red;
}
.add:after{ /* 这个伪类会自动的将content中的内容添加到标签内容的后面 */
content: ‘ welcome to here!‘;
color: dodgerblue;
}
.add:before{ /* 这个伪类会自动的将content中的内容添加到标签内容的前面 */
content: ‘Yeah ~ ‘;
color: red;
}
</style>
</head>
<body>
<a href="http://hgzerowzh.com">Pray の 小破站</a>
<div class="box">
<div class="top"></div>
<div class="bottom"></div>
</div>
<div class="add">hello hgzerowzh</div>
</body>
</html>3.4 CSS选择器的优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
color: rebeccapurple;
}
div{
color: yellow;
}
#id1{
color: lightblue;
}
</style>
</head>
<body>
<div class="div1" id="id1">优先级</div>
<!--可以把样式的应用方式分为几个等级，按照等级来计算权重-->
<!---->
<!--1、!important，加在样式属性值后，权重值为 10000-->
<!--2、内联样式，如：style=””，权重值为1000-->
<!--3、ID选择器，如：#content，权重值为100-->
<!--4、类，伪类和属性选择器，如： content、:hover 权重值为10-->
<!--5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1-->
<!--6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0-->
</body>
</html>4. CSS的背景及颜色属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{ /* 字体属性 */
font-size: 20px;
font-family:"Microsoft YaHei UI";
font-weight:lighter;
/*设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗*/
font-style: italic;
/*设置字体是否倾斜，如：font-style:‘normal‘; 设置不倾斜，font-style:‘italic‘;设置文字倾斜*/
}
.back{
width: 800px;
height: 800px;
background-image: url(img.jpg); /* 默认是重复填充 */
background-repeat:no-repeat;
background-position: 0 250px; /* 第一个参数是控制x轴的距离，第二个参数控制y轴的距离 */
background-attachment: fixed; /* 设置背景图片是固定还是随着页面滚动条滚动 */
/* background: #000 url("img.jpg") no-repeat 0 250px fixed; */
}
span{
display: inline-block; /* 将内联标签变成块级标签,只有块级标签才能设置长和宽 */
width: 18px;
height: 20px;
background-image: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13");
background-position: 0 -100px;
}
</style>
</head>
<body>
<p>welcome to this place!</p>
<!--颜色属性-->
<div style="color: blue;">ppp</div>
<div style="color: #7165ff;">ppp</div>
<div style="color: rgb(255,0,0);">ppp</div> <!-- 以rgb的格式调颜色 -->
<div style="color: rgba(255,0,0,0.5);">ppp</div> <!-- rgba的第四个值是设置透明度 -->
<div class="back">hello</div>
<span></span>
</body>
</html>5. CSS的文本与边框属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
height: 100px;
background-color:red;
text-align: center; /* 使文本水平方向居中 */
line-height: 100px; /* 设置行高(一行的高度) */
text-indent: 150px; /* 设置首行缩进 */
letter-spacing: 10px; /* 设置各个文字之间的间距 */
word-spacing: 10px; /* 英文单词与单词之间的间距 */
text-transform: capitalize; /* 设置各个单词的首字母大写(一般设置标题的时候用) */
}
.div2{
width: 200px;
height: 200px;
border-color: blue;
border-style: solid;
border-width: 5px; /* 设置边框的厚度 */
border: 2px solid red; /* 也可以直接写三个值 */
}
</style>
</head>
<body>
<div class="div1">文本属性</div>
<div class="div2">边框属性</div>
</body>
</html>6. CSS的列表与display属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ol,ul{
/*list-style: lower-latin; !* 以abc...开头 *!*/
list-style: none; /* 去掉开头的效果 */
}
div,p,a{
height: 100px; /* 只有块级标签才可以设置长和宽的属性 */
width: 100px;
}
div{
background-color: yellow;
}
p{
background-color: #7165ff;
display: inline; /* 这里将p这个块级标签设置成行内标签 */
}
a{
background-color: red;
/*display: block; !* 这里将a这个行内标签设置成块级标签 *!*/
/*display: none; !* 隐藏这个标签 *!*/
display: inline-block; /* 设置成行内块，可以设置长和宽，也可以在一行内进行横向堆叠 */
}
</style>
</head>
<body>
<ol>
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<div> div div div div div div</div>
<p>pppppppp</p>
<span>span span span span span span </span>
<a href="#">click</a>
</body>
</html>7. CSS的内外边距和margin-top塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0; /* 将浏览器自动给body设置的margin边距取消掉 */
}
.div1{
width: 200px; /* 这里的长和宽不包含边框的宽度,也不包含padding的宽度 */
height: 200px;
background-color: blue;
border: 20px solid yellow;
padding: 40px; /* 设置内边距 */
margin: 20px; /* 设置外边距 */
/*margin: 10px 20px 20px 10px; !* 这里的顺序为 上，右，下，左，(顺时针方向) *!*/
}
.div2{
width: 200px;
height: 200px;
background-color: red;
border: 20px solid green;
}
/*边界塌陷或边界重叠：*/
/*1.兄弟div：上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值*/
/*2.父子div：父级div中没有border，padding，inline content，子级div中的margin会一直向上找，*/
/*直到找到某个标签包括border，padding，inline content中的一个，然后按此div进行margin*/
</style>
</head>
<body>
<div class="div1">hello div1</div>
<div class="div2">hello div2</div>
</body>
</html>8. CSS的float属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
width: 100px;
height: 100px;
background-color: red;
float: left;
/*【注意】：当初float被设计的时候就是用来完成文本环绕的效果，所以文本不会被挡住，即float的特征，*/
/*即float是一种不彻底的脱离文档流方式*/
}
.div2{
width: 200px;
height: 100px;
background-color: blue;
float: left;
clear: left; /* 表示清除这个标签左边的浮动(这个标签的左边不能有浮动的对象，若有，则另起一行) */
/* clear属性只会对自身起作用，而不会影响其他元素，如果一个元素的右侧有浮动的对象，而这个元素设置了不允许右边有浮动的对象 */
/* 则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的 */
}
.div3{
width: 100px;
height: 200px;
background-color: green;
}
.div4{
width: 100px;
height: 300px;
background-color: #7165ff;
}
.clearfix:after{
content: ‘‘;
display: block;
clear: both;
}
</style>
</head>
<body>
<!--常见的块级元素：div，form，table，p，pre，h1-h5，dl，ol，ul等-->
<!--常见的内联元素：span，a，strong，em，label，input，select，textarea，img，br等-->
<!--文档流：指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列-->
<!--脱离文档流：也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位-->
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3 clearfix">3</div> <!-- 这里也清除了浮动 -->
<div style="clear: both;"></div> <!-- 清除浮动的一种方式 -->
<div class="div4">4</div>
</body>
</html>9. CSS的定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
width: 100px;
height: 100px;
background-color: red;
}
.div2 {
width: 200px;
height: 100px;
background-color: blue;
position: relative; /* 设置为relative的定位，相对于它原本的位置进行偏移，但是它原来的在文档流中占的位置依然还在 */
left: 100px;
top: 100px;
}
.div3{
width: 100px;
height: 200px;
background-color: green;
position: absolute;
left: 100px;
top: 100px;
/* 设置为绝对定位的元素从文档流中完全删除，并相对于最近的已定位的祖先元素定位，如果元素没有已定位的祖先， */
/*那么它的位置相对于最初的包含块(即body元素)*/
}
.div4{
width: 100px;
height: 300px;
background-color: #7165ff;
}
.div5{
width: 100px;
height: 200px;
position: absolute; /* 因为设置了绝对定位，所以这个标签已经脱离的文档流 */
margin-top: 30px; /* 这时的margin定位是相对于标签最开始的位置来定位的 */
margin-left: 120px;
}
.returnTop{
width: 50px;
height: 50px;
background-color: red;
position: fixed;
/*设置了fix定位的元素脱离了正常的文档流，以窗口为参考点定位*/
/*当出现滚动条时，对象不会随着滚动，而其层叠通过z-index属性定义*/
bottom: 20px;
right: 5px;
}
.clearfix:after{
content: ‘‘;
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3 clearfix">3</div>
<div style="clear: both;"></div>
<div class="div4">4</div>
<div class="div5">5</div>
<div class="returnTop">6</div>
</body>
</html>