关于CSS的个人理解
CSS的个人理解
一、概念
层叠样式表,主要由属性和属性值(value)组成。(虽然HTML、CSS对代码大小写不敏感,但是属性和属性值对代码大小写是敏感的)
二、工作方式
1.工作原理
由浏览器将CSS和html分别转化为文档对象,组合为DOM文档对象模型,标记语言中的每个元素、属性、文字片段都是DOM树中的一个节点,再由浏览器转换显示。
2.如何应用
(1)内联样式
优先级最高,但由于会造成代码冗余及代码更新任务庞大,一般不采用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
</head>
<body>
<h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
<p style="color:red;">This is my first CSS example</p>
</body>
</html>
(2)内部样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<style>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>
(3)外部样式表
单独建立一个.css文档
易于代码更新,减少代码冗余。作为新手,这一点也是必须要做到的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>
三、语法内容
1.css声明
格式:“property : value”
属性(property)与属性值(value)单词拼写采用美式标准。
2.css声明块
格式:“{property : value; property : value;}”
“;”的丢失最易导致错误。
3.css选择器和规则
格式:“selector {property : value; property : value;}”
(1)层叠(cascade)
1)简单选择器
元素选择器 p
类选择器 .class
ID选择器 #id
通用选择器 *
并且选择器 p.class#id
并列选择器 p,.class,#id
2)层次选择器
后代选择器 parent son,使用空格分割两个选择器
子代选择器 parent>son,使用>分割两个选择器
下一个兄弟选择器 selector+selector,使用+分割两个选择器
之后所有兄弟选择器 selector~selector,使用~分割两个选择器
3)属性选择器(form表单多用)
selector[property]
selector[property=value]
selector[property*=value]
selector[property^=value]
selector[property$=value]
selector[property~=value]
4)伪类选择器
子元素
:first-child
:nth-child()
:first-of-type
状态
:hover
:active
(顺序LVHA:link visited hover active)
:focus
5)伪元素选择器
::after 常用于清除浮动
::before
::first-letter
::first-line
6)特性值:
!important(改变了CSS方式,尽量绕开!)
放在一段style中(1000)
id(100)
.class或伪类或属性选择器(10)
元素选择器或伪元素选择器(1)
后者覆盖前者(按照顺序)
(2)继承
这里不多叙述…………
4.布局
(1)正常布局流
1)div行及元素
2)span块级元素
(2)浮动布局
float:left;
float:right;
clear:both;(清除左右浮动,该元素会换行)
*块级元素一旦浮动之后:
1)脱离了当前文档流,对父级元素失去了支撑的作用,后面的非浮动元素会插入到浮动元素的下面。
2)浮动元素的宽高默认由其内容所决定,但是我们可以为其指定宽高。
3)当浮动元素无法承载子元素的时候,子元素会在下一行显示。
4)浮动元素的margin无法合并。
*浮动引发的问题:
1)子元素浮动会失去对父元素的支撑
解决方案:在所有子元素的末尾添加一个空元素,该空元素须clear:both;
2)如果为子元素的宽度指定绝对值,并且子元素具有边框,在缩放浏览器的时候会错位
解决方案:
1.box-sizing:border-box;
2..right {margin-left:100px;}
(3)定位布局
1)静态定位
2)相对定位
相对于该元素原先位置进行移动
relative:
top
right
bottom
left
3)绝对定位
相对于该元素最近的定位父元素位置进行移动
absolute:
top
right
bottom
left
4)固定定位
fixed
(4)伸缩盒布局
display:flex;