一、CSS样式简介
- 行内样式:内联样式）直接在标签的style属性中书写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="background-color: aqua">
<div style="color: blue; font-size: 18px ; background-color: antiquewhite">iiiiii</div>
<p style="background-color: beige; font-size: 28px; border: 5px dashed azure">我是段落</p>
<div>rongqi</div>
<p>pppppp</p>
</body>
</html>
- 页内样式:在本网页的style标签中书写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>业内样式</title>
<style>
div{
color: aquamarine;
font-size: 30px;
border: red solid;
}
p{
color: blue;
font-size: 80px;
background-color: azure;
}
</style>
</head>
<body>
<div>rongqi</div>
<p>pppppp</p>
</body>
</html>
- 外部样式:在单独的CSS文件中书写，然后在网页中用link标签引用
<p>css</p>
div {
color: aquamarine;
font-size: 30px;
border: red dashed;
}
p{
color: blue;
font-size: 80px;
background-color: azure;
}
<p>html</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部样式</title>
<link rel="stylesheet" href="./css/01-index.css">
</head>
<body>
<div>rongqi</div>
<p>pppppp</p>
</body>
</html>
二、CSS选择器
- 标签选择器:根据标签名找到对应的标签
- 类选择器:根据类名找到对应的标签
- id选择器:根据id名找到对应的标签
- 并列选择器:用于多个标签之间有相同的样式
- 复合选择器:用于精准的定位
- 后代选择器:用于标签嵌套标签
- 直接后代选择器:格式: div>a
- 相邻兄弟选择器:格式:div+p
- 属性选择器:格式:div[name]
- 伪类:格式:div:hover
- 伪元素:格式:div:after
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
并列选择器
div, span{
color: red;
}
标签选择器
p{
color: green;
}
类选择器
.high{
color: grey;
}
id选择器
#main{
color: blue;
}
复合选择器
div.test {
color: orange;
}
后代选择器
div p{
background-color: brown;
}
直接后代选择器
div.test>p{
background-color: blue;
}
属性选择器
div[name]{
color: red;
}
div[name="111"]{
color: black;
}
伪类选择器
input:focus {
outline: none;
width: 400px;
height: 60px;
font-size: 30px;
}
input:hover{
outline: none;
width: 200px;
height: 30px;
font-size: 20px;
}
</style>
</head>
<body>
<div>并列选择器</div>
<span>并列选择器</span>
<p>标签选择器</p>
<p class="high">类选择器</p>
<div id="main">id选择器</div>
<div class="test">复合选择器</div>
<div class="test">
<p>直接后代选择器</p>
<div>
<p>后代选择器</p>
</div>
</div>
<div name="0000">属性选择器</div>
<div name="111">属性选择器</div>
<input placeholder="请输入密码"><br>
</body>
</html>
三、CSS选择器的优先级别
- 选择器的针对性越强，它的优先级就越高
<p>important > 内联 > id > 类 | 伪类 | 伪元素 | 属性选择 > 标签> 通配符 > 继承</p> - 选择器的权值加到一起，大的优先；如果权值相同，后定义的优先
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>优先级别</title>
<style>
div{
font-size: 20px;
color: black;
}
.main{
font-size: 10px;
color: grey;
}
.test{
font-size: 5px;
color: blue;
}
*{
font-size: 30px;
color: green;
}
</style>
</head>
<body>
<div class="main test">77777</div>
</body>
</html>
<p>结果：blue</p>
四、HTML的标签类型
-
块级元素具有以下特点： ①总是在新行上开始，占据一整行； ②高度，行高以及外边距和内边距都可控制； ③宽带始终是与浏览器宽度一样，与内容无关； ④它可以容纳内联元素和其他块元素。<\div>、<p>、<\h1>、<\h6>、<\ol>、<\ul>、<\dl>、<\table>、<\address>、<\blockquote> 、<\form>
-
行内元素的特点： ①和其他元素都在一行上； ②高，行高及外边距和内边距部分可改变； ③宽度只与内容有关； ④行内元素只能容纳文本或者其他行内元素,<\a>、<\span>、<\br>、<\i>、<\em>、<\strong>、<\label>、<\q>、<\var>、<\cite>、<\code>
-
行内-块级标签:多个行内-块级标签可以显示在同一行,能随时设置宽度和高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display</title>
<style>
#test1 {
display: inline;
}
#test2 {
display: inline-block;
color: orangered;
}
#test3 {
display: block;
}
</style>
</head>
<body>
<!--行内-->
<div id="test1">000000</div>
<div id="test1">111111</div>
<!--行内-块级-->
<div id="test2">
222222
<div>3333</div>
<div>4444</div>
</div>
<div id="test2">333333</div>
<!--块-->
<input type="text" placeholder="44444" id="test3">
<input type="text" placeholder="55555" id="test3">
</body>
</html>
五、CSS属性
- 可继承属性:父标签的属性值会传递给子标签,一般是文字控制属性
- 不可继承属性:父标签的属性值不能传递给子标签,一般是区块控制属性
六、盒子模型
- 内容(content)
- 填充(padding) :上左下右 或 (上下)(左右)
- 边框(border）：border-width(边框宽度) border-style(边框样式) border-color(边框颜色)
- 边界(margin)：上左下右 或 (上下)(左右)
- RGBA透明度
- 块阴影与文字阴影：box-shadow，text-shadow
*圆角：border-radius - 形变：transform transform-origin transition
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
*{
margin: 0px;
}
div{
width: 300px;
height: 300px;
padding: 10px 20px 30px 40px;
border:10px solid;
margin: 20px 60px 40px 100px;
background-color: rgba(255,0,0,0.5);
display: inline-block;
border-radius: 20px;
box-shadow: 10px 20px 10px green;
text-shadow: 10px 20px 1px green;
}
</style>
</head>
<body>
<div>这是一个盒子!></div>
</body>
</html>
七、标签的居中
- 水平居中:
<p>行内标签 行内-块级标签text-align:center</p>
<p>块级标签 margin:0 auto</p> - 垂直居中 line-height == height
- 定位
<p>父position:relative 子position:absolute</p>
<p>top:50%;left:50%;</p>
<p>transform:translate(-50%, -50%)</p>
<p> 居中</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display</title>
<style>
#test0 {
background-color: red;
width: 600px;
height: 200px;
/*块级标签水平居中*/
margin: 0 auto;
/*块级标签行内居中*/
text-align: center;
}
/*行内*/
#test1 {
display: inline;
background-color: orange;
text-align: center;
/*行内标签设置高度和宽度无效,高度和宽度根据内容而定*/
width: 200px;
height: 100px;
}
/*行内-块级标签*/
#test2 {
display: inline-block;
color: orangered;
background-color: orange;
/*行内-块级标签设置高度和宽度无效,高度和宽度根据内容而定*/
width: 200px;
height: 100px;
}
/*块级标签*/
#test3 {
display: block;
margin: 0 auto;
background-color: orange;
}
/*块级标签*/
#test4 {
/*标签水平居中*/
margin: 0 auto;
/*内容水平居中*/
text-align: center;
width: 200px;
height: 200px;
background-color: #2b669a;
/*垂直居中*/
line-height: 200px;
}
</style>
</head>
<body>
<div id="test0">
<!--行内-->
<div id="test1">test1-a</div>
<div id="test1">test1-b</div>
<!--行内-块级-->
<div id="test2">
test2-a
<div>test2-b</div>
<div>test2-c</div>
</div>
<div id="test2">test2-d</div>
</div>
<!--块-->
<input type="text" placeholder="test3-a" id="test3">
<input type="text" placeholder="test-b" id="test3">
<div id="test4">test4</div>
</body>
</html>
<p>定位</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position</title>
<style>
#test1 {
width: 300px;
height: 200px;
background-color: grey;
/*相对距离*/
position: relative;
margin: 60px 140px;
}
.test2 {
width: 200px;
height: 100px;
background-color: red;
/*绝对距离*/
position: absolute;
/*相对父类test1的距离*/
left: 30px;
top: 70px;
}
</style>
</head>
<body>
<div id="test1">
test1
<div class="test2">test2</div>
</div>
</body>
</html>
CSS布局
1.1 标准流布局
- 所有网页都在标准流的布局中
- 从上到下,从左到右
1.2 脱离标准流布局
- float:
<p>作用:让子标签浮动在父标签的左边和右边</p>
<p>用途:常用于列表的左浮和右浮</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Float浮动-脱离标准流</title>
<!--
注意:
任何标签只要一浮动,类型就会被转为行内-块级标签
-->
<style>
#main{
background-color: red;
width: 500px;
height: 200px;
}
.test1{
background-color: blue;
/*浮动*/
float: left;
width: 30px;
height: 60px;
}
.test2{
background-color: yellow;
float: right;
}
.test3{
background-color: purple;
}
</style>
</head>
<body>
<div id="main">
<div class="test1">1</div>
<div class="test2">2</div>
<div class="test3">3</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常见标签</title>
</head>
<body>
<div style="border:4px solid blue;">
blue
</div>
<div style="border:4px solid red;float:left;">
red-left
</div>
<div style="border:4px solid orange; display: inline-block">
without-left
</div>
<div style="border:4px solid black; float: right">
black-right
</div>
<br>
<br>
<br>
<hr>
<br>
<div style="border:4px solid blue;">
</div>
<div style = "border : 4px solid red; width: 400px; height: 400px">
<img style = "border:4px solid yellow; float:left;" src = "voucher_orange_right.png">
外层div没有了浮动，因此红色边框宽度默认是100%全屏。其内容img由于加上了float，使得该img具有了欺骗性。float给img施了个障眼法，让该img的inline-height高度塌陷为0了。这样外层div计算高度时，认为img的高度为0，相当于div的content的高度为0，因此红色边框看起来是一条直线。但请注意障眼法毕竟是障眼法，并不是真的让img的高度塌陷为0了，可以看到上图中img的黄色边框还是有正常高度的。如果给div里加点文字，效果如下：可以看到，外层div在没有手动设定height的前提下，其高度是由内部content的最大高度决定的，由于img的float使得img具有高度塌陷的欺骗性，让div误以为img的line-height为0，因此div的高度就是文字的匿名inline-box的inline-height。
</div>
</body>
</html>
- position结合top left right bottom
<p>作用:让子标签在父标签的任意位置进行定位</p>
<p>规则:子绝父相,常用属性:absolute relative fixed</p>
1.3 注意事项
<p>任何一个标签,只要脱离标准流布局,标签的类型就被转化为行内-块级标签</p>