难点&重点:东西太多了吧.....
- 各类选择器的适用和区别 (https://blog.csdn.net/LIUCHUANQI12345/article/details/109170492)
- 选择器的优先级(https://blog.csdn.net/hellow_tommer/article/details/121566718)
- 取色器
- css的继承性
- 行高和font-size line-height详解
- 行内元素,块状元素,内联元素
- 盒子模型,margin注意事项
- 相对位置
- 浮动
CSS全称为层叠样式表(cascading style sheets),css也是一种标记语言,用于给html结构设置样式,与HTML关系是这样的,HTML搭建结构,CSS添加样式,实现了:结构和样式的分离
样式
CSS 规则集（rule-set）由选择器和声明块组成：每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。多条 CSS 声明用分号分隔，声明块用花括号括起来。
优先级原则:行内样式>内部样式>外部样式
选择器
元素选择器
通配选择器
类选择器
ID选择器
交集选择器
并集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.type1{
color: black;
}
.type2{
color: orange;
}
.type1,.type2,#id-test{
background-color: blue;
width: 180px;
}
#id-test{
color: blue;
width: 200px;
}
h1.type2{
color: burlywood;
width: 200px;
}
</style>
</head>
<body>
<h1 id="id-test">一个测试</h1>
<p style="color: red; width: 100px">i love you</p>
<p class="type1">你好</p>
<p class="type1">你好</p>
<p class="type1">你好</p>
<p class="type2">hhhhh</p>
<p class="type2">hhhhh</p>
<p class="type2">hhhhh</p>
<h1 class="type2">hhhhh</h1>
</body>
</html>
后代选择器:语法:选择器1 选择器2 ...选择器n {} 后代选择器,最终选择的是后代,不选中祖先
子代选择器
兄弟选择器
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
div ol li{
color: blue;
}
[title="abc"]{
color: red;
}
[title^="b"]{
color: red;
}
div ul+li{
color: red;
}
div>p>a{
color: #000;
}
div.abc>a{
color: #000;
}
h1+p{
color: aqua;
}
p~p{
color: antiquewhite;
}
</style>
<body>
<div>
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<p>
<a href="#">11111</a>
<div class="abc">
<a href="#">11111</a>
</div>
</p>
</div>
<p1 title="abc">abc</p1>
<p1 title="bbc">abc</p1>
<h1></h1>
<p>abcccc</p>
<p>abcccc</p>
<p>abcccc</p>
</body>
</html>
伪类选择器
动态伪类
结构伪类
否定伪类
UI伪类
目标伪类
语言伪类
伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link{
color: azure;
}
a:visited{
color: aquamarine;
width: 200px;
}
/*悬浮*/
a:hover{
color: orange;
}
/*激活*/
a:active{
color: blue;
}
/* 焦点*/
select:focus{
background-color: aqua;
}
/*选中的是div的后代选择器p,并且p的父亲是谁无所谓*/
div p:first-child{
color: aqua;
}
div div p:nth-child(-n + 5){
color: aqua;
}
div >div> p:last-of-type{
color: aqua;
}
div:empty{
color: aqua;
width: 1000px;
}
:input:checked{
width: 100px;
height: 1000px
;
}
p::first-letter{
background-color: red;
}
div+p::before{
content: "%";
}
p::first-line{
background-color: azure;
}
p::selection{
background-color: blue;
}
</style>
</head>
<body>
<a href="aaaa">点击</a>
<select>
<option>"aaaa"</option>
<option>"bbbb"</option>
</select>
<div>
<p>ceshi</p>
<div>
<marquee>
<p>ceshi</p>
</marquee>
</div>
<p>ceshi</p>
<p>ceshi</p>
</div>
<div>
<span></span>
<div>
<p>ceshi</p>
<p>ceshi</p>
<p>ceshi</p>
<p>ceshi</p>
<p>ceshi</p>
<p>ceshi</p>
<div></div>
</div>
</div>
<div></div>
<input type="checkbox">
<input type="radio" name="aaa">
<input type="radio" name="aaa">
</body>
</html>
选择器的优先级
通过不同的选择器,选中相同的元素,并且为相同的样式名设置不同的值,就发生了样式的冲突,到底应用哪个样式,此时需要看优先级了,简单描述:行内样式>ID选择器>类选择器>元素选择器>通配选择器
像素
像素是一个相对单位
颜色
常用字体属性
大小
族
风格
粗细
符合属性
颜色
间距
修饰
缩进
对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
letter-spacing: 10px;
}
p1.aa{
word-spacing: 10px;
}
p1.bb{
text-decoration: underline wavy ;
}
p.cc{
font-size: 30px;
text-indent: 60px;
}
p.dd{
font-size: 30px;
text-indent: 60px;
text-align: end;
}
</style>
</head>
<body>
<h1>HHHH HHH H H 我们</h1><br>
<p1 class="aa">HHHH HHH H H 我们 </p1><br>
<p1 class="bb">HHHH HHH H H 我们 </p1><br>
<p class="cc">HHHH HHH H H 我们 </p>
<p class="dd">HHHH HHH H H 我们 </p>
</body>
</html>
行高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
font-size: 100px;
line-height: 50px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<p>asgrgsgsgsd</p>
<p>asgrgsgsgsd</p>
列表相关属性
符号,位置,自定义列表符号
表格相关属性
背景相关属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color: white;
}
div{
width: 100px;
height: 100px;
border: 100px black;
background-color: aqua;
background-image: url("aa.jpg");
/*背景图片重复方式*/
background-repeat: no-repeat;
/*对齐方式*/
background-position: left top;
}
</style>
</head>
<body>
<div>
nigao
</div>
</body>
</html>
css长度单位
- px像素
- em相对元素font-size的倍数
- rem相对根字体大小
- %相对父元素计算
元素的显示模式
block
- 在页面中独占一行,不会与任何元素共用一行,是从上到下排列的
- 默认宽度:撑满父元素
- 默认高度:由内容撑开
- 可以通过CSS设置宽高
inline
- 在页面中不会独占一行,一行中不能容纳下的行内元素,会在下一行继续从左到右排列
- 默认宽度 :内容撑开
- 默认高度:内容撑开
- 无法通过CSS设置宽高
inline-block
- 在页面中不独占一行,一行中不能容纳下的行内元素,会在下一行继续从左到右排列
- 默认宽度 :内容撑开
- 默认高度:内容撑开
- 可以通过CSS设置宽高
https://www.cnblogs.com/qiul-ing/p/17308871.html
盒子模型
http://c.biancheng.net/css3/border.html [CSS边框样式（border]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
/*内容区的宽和高*/
width: 200px;
height: 200px;
/*内边距 设置的背景颜色会填充边框*/
padding: 20px;
/*边框*/
border: 10px salmon solid;
font-size: 10px ;
/*外边距*/
margin: 50px;
background-color: aqua;
}
</style>
</head>
<body>
<div>
abcd
</div>
</body>
</html>
margin 塌陷问题和合并问题
布局技巧
浮动
没看...
定位
相对定位
绝对定位
固定定位
粘性定位
H5
语义标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
<input type="text" list="a">
<button>按钮</button>
</form>
<datalist id="a">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</datalist>
</body>
</html>
视频标签
音频标签
全局属性
CSS3
CSS3之背景剪裁Background-clip_-webkit-background-clip
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
border: 1px solid bisque;
float: left;
margin-left: 20px;
font-size: 20px;
}
.box1{
background-image: linear-gradient(red,blue,greenyellow);
}
.box2{
background-image: linear-gradient( to left top,red,blue,greenyellow);
}
.box3{
background-image: linear-gradient( 20deg
,red,blue,greenyellow);
}
.box4{
background-image: linear-gradient( to left top,red,blue,greenyellow);
font-size: 50px;
text-align: center;
line-height: 200px;
font-weight: bold;
color: blanchedalmond;
-webkit-background-clip:text ;
}
.box5{
background-image: radial-gradient(
red,blue,greenyellow);
}
.box6{
background-image: radial-gradient(circle,
red,blue,greenyellow);
}
</style>
</head>
<body>
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">444444</div>
<div class="box box5">444444</div>
<div class="box box6">444444</div>
</body>
</html>
web字体
http://c.biancheng.net/css3/position.html
[position]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.out{
width: 200px;
height: 200px;
border: 1px solid black;
margin: 0 auto;
margin-top: 100px;
}
.in{
width: 200px;
height: 200px;
background-color: green;
transform: translateX(50px);
}
</style>
<body>
<div class="out">
<div class="in">
abc
</div>
</div>
<hr>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 1200px;
height: 1200px;
}
.box:hover .b{
width: 1200px;
}
.box1{
width: 200px;
height: 200px;
background-color: bisque;
/* 设置需要过渡的属性*/
/* 不是所有属性都能过渡*/
transition-property: height , width,background-color;
transition-duration: 1000ms;
}
.box1:hover{
height: 400px;
width: 400px;
background-color:aqua;
}
.box2 {
width: 200px;
height: 200px;
background-color: bisque;
transition-property:all;
transition-duration: 1000ms;
}
.box2:hover{
transition-timing-function: ease;
background-color:aqua;
}
</style>
</head>
<body>
<div class="box">
<div class="b box1">abc</div>
<div class="b box2">abc</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.out{
width: 1200px;
height: 1200px;
border: 1px salmon solid;
}
.in{
width: 100px;
height: 100px;
background-color: aqua;
animation-name: ta;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes ta {
from{
}
to{
transform:translate(1100px) rotate(360deg);
background-color: greenyellow;
}
}
/* 定义一组关键帧*/
</style>
<body>
<div class="out">
<div class="in">
</div>
</div>
</body>
</html>
伸缩盒模型
只有直接的子元素才是伸缩项目
伸缩项目:伸缩容器所有子元素自动成为了:伸缩项目
网友评论