Css语法
目录
一、Css引入的四种方式
- 行内式：在标签中加style属性，值为css代码，不同样式用" ; "号分隔
- 嵌入式：在head标签中，通过style标签来实现
<head>
<style>
p{
background-color: red;
}
</style>
</head>
- 链接式：将css代码单独写在css文件中（推荐，边加载边渲染）
<link href="path" rel="stylesheet" type="text/css"/>
- 导入式（不推荐，先加载后渲染）
<head>
<style>
@import "path";
</style>
</head>
二、基础标签选择器
下述几个选择器可以组合使用
- *: match all tags
- #id_name: match a tag of specific id_name(an id_name can be used only once)
- class_name: match all tags of specific class_name
- E: match all tags of specific tag_name
三、组合标签选择器类型
- 后代：用空格分隔具有层级关系的基础选择器，影响所有后代（E F）
- 子代：用大于号分隔具有层级关系的基础选择器，只影响子代（E>F）
- 并列：用逗号分隔所有基础选择器，影响所有被基础选择器选中的标签（E,F）
- 毗邻：用加号分隔所有基础选择器，只影响与左边紧挨的下边的标签（E+F）
四、标签嵌套规则
- 块级可以嵌套内联标签、块级标签，内联只能嵌套内联标签
- <p>标签不能包含块级标签
- <li>标签可以包含<div>标签
- 块级元素和块级元素并列，内联元素和内联元素并列
五、属性标签选择器
E(element)代表标签名，每个标签可以看作一个元素
- E[att]: 匹配所有具有att属性的元素
- E[att=val]: 匹配所有att属性值等于val的元素
- E[att~=val]: 即使att属性值中有多个以空格为分隔的值，只要有一个值为val就可
- E[att^=val]: 匹配att属性值中以指定值为开头的元素
- E[att$=val]: 匹配att属性值中以指定值为结尾的元素
- E[att^=val]: 匹配att属性值中以含有指定字符的元素
六、伪类
以下格式写在style标签内
- a:link{}：显示时的样式
- a:hover{}：悬浮时的样式
- a:active{}：点击时的样式
- a:visited{}：点击后的样式
- p:after{content: str; color: red}: 在p标签后插入内容，并控制样式
- p:before{content: str; color: red}: 在p标签前插入内容，并控制样式
七、常用样式
1. 颜色样式
<div style="color:red"></div>
<div style="color:#ffee33"></div>
<div style="color:rgb(255,0,0)"></div>
<div style="color:rgb(255,0,0,0.5)"></div>
2. 字体样式
<div style="font-size:45px"></div>
<div style="font-style:itallic"></div>
<div style="font-family:Times New Roman"></div>
<div style="font-weight:lighter"></div>
3. 背景样式
background-position:
left top(10px,10px);
top center bottom (transverse);
left center right (lengthways);
#div1{
height:160px;
width:200px;
background-color:red;
background-image:url(path);
background-repeat:no-repeat;
background-size:500px,500px;
background-position:left center;
background:url(path) no-repeat 100px 100px red;
}
4. 文本样式
p{
text-align:center;
line-height:100px;
letter-spacing:5px;
word-spacing:20px;
text-transform:capitalize;
text-decoration:none;
}
5. 外边距和内边距（调整位置）
当内嵌元素使用margin固定位置时，外部元素不能单单只有背景颜色，否则会无法识别边框范围，导致位置没有改变。
padding是通过扩充自身来实现位置定位的，自身大小会变。
- margin: 元素和元素间的距离
- padding：内容与边框之间的距离
- content：内容的大小
示例
-- 将body层的外边距设为0
body{
margin:0 px;
padding:0 px;
}
6. 边框样式
示例
p{
border-style:solid;
border-color:red;
border-width:20px;
border:solid green 3px;
border:dashed green 3px;
}
7. 列表样式
示例
ul,ol{
list-style: decimal-leading-zero;
list-style: none;
list-style: upper-alpha;
list-style: disc;
list-style: circle;
}
八、常用属性
1. display属性
p{
display: inline; /*Blcok tag is turned into inline tag*/
display: block; /*Hnline tag is turned into block tag*/
display: none; /*Hind the tag on the webpage*/
display: inline-block; /*Both the characters of block tag and inline tag*/
}
2. float属性
文档流
- 正常文档流：按照从上到下，从左到右的顺序，来展示各元素标签
- 脱离文档流：将元素从正常文档流中取出，放在另一文档流中，两文档流重叠显示画面，相当于ps中的图层概念
功能
- 将标签元素从标准文档流中抽出，使之浮在标准文档流之上
- 标准文档流的文本内容，并不会被抽出的文档流的内容所覆盖，而是以环绕的方式布局在标准文档流周围（所以float被称为不完全脱离）
示例
p{
float: left;
float: right;
}
3. clear属性
如果左右两边有浮动元素，这个属性可以帮助我们实现换行
示例
p{
clear: none;
clear: left;
clear: right;
clear: both;
}
4. position属性
可以实现完全脱离正常文档流
示例
p{
/*Follow the standard(normal) file_stream*/
position: static;
/*Follow the standard(normal) file_stream,but can modulate the position based on the previous position by these attribute or top,right,bottom and left*/
position: relative;
/*Detach the standard file_stream,and can designate a position that can‘t follow the changes of contents of the window.*/
position: fixed;
/*Detach the standard file_stream,and base on the position where the father‘s tag is located to shift*/
position: absolute;
}
5. overflow属性
示例
overflow:hidden;
overflow:auto;
overflow:scroll;
九、常见问题
1. 使用浮动元素后背景消失问题
- 写一个空div标签，写在子元素后面
- 为该标签添加clear：both的样式
- 或者在父元素中添加overflow：hidden
2. a标签背景图片不显示问题
需要设置宽高才能看见图片
解决方案
.logo{
background: url(path) no-repeat 0 0;
height: 23px;
width: 121px;
float: left;
}
3. 设置自适应高度变化
important: 声明这个样式为主样式，不可被覆盖和修改
解决方案
div{
overflow:hidden;
minheight:700px;
height:auto!important;
}
4. 小知识点的补充
概念补充
- height represent the height of capacitor
- line-height represent the height of row
- font-size represent the height of fonts
- the height of capacitor > the height of row > the height of fonts
other
p{
opacity:0~1;
border-radius:0~100%;
/*Can change the relative position of text based on the position of image*/
vertical-align:50px;
vertical-align:top;
}
/*Designate the normal showing style and the hover showing style*/
a.active,a.active:hover{
background-color:yellow;
}