Css语法

目录

• Css语法
  • 一、Css引入的四种方式
  • 二、基础标签选择器
  • 三、组合标签选择器类型
  • 四、标签嵌套规则
  • 五、属性标签选择器
  • 六、伪类
  • 七、常用样式
    • 1. 颜色样式
    • 2. 字体样式
    • 3. 背景样式
    • 4. 文本样式
    • 5. 外边距和内边距（调整位置）
    • 6. 边框样式
    • 7. 列表样式
  • 八、常用属性
    • 1. display属性
    • 2. float属性
    • 3. clear属性
    • 4. position属性
    • 5. overflow属性
  • 九、常见问题
    • 1. 使用浮动元素后背景消失问题
    • 2. a标签背景图片不显示问题
    • 3. 设置自适应高度变化
    • 4. 小知识点的补充

---

一、Css引入的四种方式

1. 行内式：在标签中加style属性，值为css代码，不同样式用" ; "号分隔

2. 嵌入式：在head标签中，通过style标签来实现

3. 链接式：将css代码单独写在css文件中（推荐，边加载边渲染）

4. 导入式（不推荐，先加载后渲染）

二、基础标签选择器

下述几个选择器可以组合使用

1. *: match all tags
2. #id_name: match a tag of specific id_name(an id_name can be used only once)
3. class_name: match all tags of specific class_name
4. E: match all tags of specific tag_name

三、组合标签选择器类型

1. 后代：用空格分隔具有层级关系的基础选择器，影响所有后代（E F）
2. 子代：用大于号分隔具有层级关系的基础选择器，只影响子代（E>F）
3. 并列：用逗号分隔所有基础选择器，影响所有被基础选择器选中的标签（E,F）
4. 毗邻：用加号分隔所有基础选择器，只影响与左边紧挨的下边的标签（E+F）

四、标签嵌套规则

1. 块级可以嵌套内联标签、块级标签，内联只能嵌套内联标签

2. 标签不能包含块级标签

4. 标签可以包含
   标签
5. 块级元素和块级元素并列，内联元素和内联元素并列

五、属性标签选择器

E(element)代表标签名，每个标签可以看作一个元素

1. E[att]: 匹配所有具有att属性的元素
2. E[att=val]: 匹配所有att属性值等于val的元素
3. E[att~=val]: 即使att属性值中有多个以空格为分隔的值，只要有一个值为val就可
4. E[att^=val]: 匹配att属性值中以指定值为开头的元素
5. E[att$=val]: 匹配att属性值中以指定值为结尾的元素
6. E[att^=val]: 匹配att属性值中以含有指定字符的元素

六、伪类

以下格式写在style标签内

1. a:link{}：显示时的样式
2. a:hover{}：悬浮时的样式
3. a:active{}：点击时的样式
4. a:visited{}：点击后的样式
5. p:after{content: str; color: red}: 在p标签后插入内容，并控制样式
6. 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是通过扩充自身来实现位置定位的，自身大小会变。

1. margin: 元素和元素间的距离
2. padding：内容与边框之间的距离
3. 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属性

文档流

1. 正常文档流：按照从上到下，从左到右的顺序，来展示各元素标签
2. 脱离文档流：将元素从正常文档流中取出，放在另一文档流中，两文档流重叠显示画面，相当于ps中的图层概念

功能

1. 将标签元素从标准文档流中抽出，使之浮在标准文档流之上
2. 标准文档流的文本内容，并不会被抽出的文档流的内容所覆盖，而是以环绕的方式布局在标准文档流周围（所以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. 使用浮动元素后背景消失问题

1. 写一个空div标签，写在子元素后面
2. 为该标签添加clear：both的样式
3. 或者在父元素中添加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;
}