CSS（1）知识点

拼搏现实的明天。 2024-02-17 21:33 24阅读 0赞

## 1 html文件中引入外部css文件 ##

## 2 常用css样式 ##

body {
        font-size:12px;
    }

***设置css样式，一般先使用class类选择器，必要时再使用id（比如div input button）选择器。***

## 3 样式注意知识点 ##

### 3.1padding/margin（内外边距） ###

<%-- 四个参数 --%>
    padding:10px 5px 15px 20px;
    上内边距是 10px
    右内边距是 5px
    下内边距是 15px
    左内边距是 20px
    <%-- 三个参数 --%>
    padding:10px 5px 15px;
    上内边距是 10px
    右内边距和左内边距是 5px
    下内边距是 15px
    <%-- 两个参数 --%>
    padding:10px 5px;
    上内边距和下内边距是 10px
    右内边距和左内边距是 5px
    <%-- 一个参数 --%>
    padding:10px;
    所有 4 个内边距都是 10px

### 3.2 background(属性无先后顺序) ###

![这里写图片描述][SouthEast]

background: url("/xiaonei/images/front/sou.jpg") 50px 50px red no-repeat scroll;

### 3.3 border（边框 outline–轮廓 与之类似） ###

**border：**对四个边框统一声明（样式、颜色、宽度—-无先后顺序）

border: red dashed 5px ;

**border-style：（方向与padding相同：上右下左）**  
![这里写图片描述][SouthEast 1]

border-style: double solid dotted dashed;

**border-width：**  
![这里写图片描述][SouthEast 2]

border-width:thin medium thick 10px;

**border-color：**（与上两种样式类似）

### 3.4 list-style ###

list-style:decimal inside url('/xiaonei/images/front/sou.jpg');

**list-style-type：**  
![这里写图片描述][SouthEast 3]  
**list-style-position：**  
![这里写图片描述][SouthEast 4]

### 3.5 table相关的属性 ###

![这里写图片描述][SouthEast 5]

borderCollapse=collapse; 
    borderSpacing=10px, 5px; 
    captionSide=top|bottom|left|right; 
    emptyCells=hide|show; 
    tableLayout=automatic|fixed;

### 3.6position ###

![这里写图片描述][SouthEast 6]

bottom: 100px; 
    position: absolute;
    z-index: 5;

### 3.7 test相关属性 ###

![这里写图片描述][SouthEast 7]

### 3.8 其他（文字方向、鼠标指针类型、控件最大尺寸、是否可见、元素的显示形状、及处理越界问题） ###

dir="rtl"

![这里写图片描述][SouthEast 8]

### 3.9 Float浮动 ###

[http://www.html5cn.org/article-5948-1.html][http_www.html5cn.org_article-5948-1.html]  
[http://www.html5cn.org/article-5948-2.html][http_www.html5cn.org_article-5948-2.html]

## 4 CSS语法 ##

### 4.1 id和class选择器 ###

#para1
    {
    text-align:center;
    color:red;
    }
    .center {
        text-align:center;}

### 4.2组合选择 ###

**后代选取器(以空格 分隔)**:匹配某元素的所有后代元素

选取<div> 元素中所有 <p> 子元素设置为黄色 : 
    div p
    {
      background-color:yellow;
    }

**子元素选择器(以大于号>分隔）**：只能选择作为某元素的直接子元素的元素

选择了<div>元素中所有直接子元素 <p>
    div>p
    {
      background-color:yellow;
    }

**相邻兄弟选择器（以加号+分隔）**：选择紧接在某元素后的元素，且二者有相同父元素

div+p
    {
      background-color:yellow;
    }

**普通兄弟选择器（以破折号~分隔）**：选取所有指定元素的相邻兄弟元素

div~p
    {
      background-color:yellow;
    }

### 4.3 伪类/伪元素 ###

![这里写图片描述][SouthEast 9]  
**4.3.1链接的不同状态显示不同的样式**

a:link {
        color:#FF0000;} /* 未访问的链接 */
    a:visited {
        color:#00FF00;} /* 已访问的链接 */
    a:hover {
        color:#FF00FF;} /* 鼠标划过链接 */
    a.anvi:active {
        color:#0000FF;} /* 已选中的链接 也可以结合class选择器使用*/

**4.3.2 :first - child伪类**  
选择元素的第一个子元素

任何元素的第一个子元素为的 <p> 元素
    p:first-child
    {
    color:blue;
    }
    匹配所有<p>元素的第一个 <i> 元素
    p > i:first-child
    {
    color:blue;
    } 
    匹配所有元素的第一个<p> 子元素中的所有 <i> 元素
    p:first-child i
    {
    color:blue;
    }

**4.3.3 :lang 伪类**  
为不同的语言定义特殊的规则

为属性值为 no 的q元素定义【】的类型
    q:lang(no)
    {
        quotes: "【" "】";
    }
    
    <p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

**4.3.4 :first-letter 伪元素**  
向文本的首字母设置特殊样式

p:first-letter 
    {
    color:#ff0000;
    font-size:xx-large;
    }

**4.3.5 :before 伪元素**  
在元素的内容前面插入新内容。

在每个 <h1>元素前面插入一幅图片
    h1:before {content:url(smiley.gif);}
    
    <h1>This is a heading</h1>

### 4.4属性选择器 ###

**4.4.1属性选择器**

[title]
    {
        color:blue;
    }

**4.4.2属性和值选择器**

[title=runoob]
    {
        border:5px solid green;
    }

**4.4.3属性和值的选择器 - 多值\[使用（~）分隔属性和值\]**

[title~=hello]
    {
        color:blue;
    } 
    
    <h1 title="hello world">Hello world</h1>
    <p title="student hello">Hello CSS students!</p>

**4.4.4属性字符串中包含指定值的元素样式的例子，使用（|或\*）分隔属性和值:**

[name|=en]    或 [name*=en]
    {
        color:blue;
    }
    
    <h2>将适用:</h2>
    <p name="en">Hello!</p>
    <p name="en-us">Hi!</p>
    <p name="en-gb">Ello!</p>
    <hr>
    <h2>将不适用:</h2>
    <p name="us">Hi!</p>
    <p name="no">Hei!</p>

[SouthEast]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/eea1315fa813413cb705d937b6898813.png
[SouthEast 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/e755122d5e374337ab5040e206d9dafd.png
[SouthEast 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/3ae4c98bbf3043f28ebf42110ad7deaf.png
[SouthEast 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/9e418290d04b4d66b0936baf2c35bf7b.png
[SouthEast 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/fc494d259cc14833be97030b5c199779.png
[SouthEast 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/1795594db41e4ae8bca613c6334f231f.png
[SouthEast 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/c487ceb2357f42d9b6ba4598bef61ead.png
[SouthEast 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/cbc9b08f8ebd4fe6bc84534cb255901a.png
[SouthEast 8]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/f286c8166aba4a828ac56405c2db9c56.png
[http_www.html5cn.org_article-5948-1.html]: http://www.html5cn.org/article-5948-1.html
[http_www.html5cn.org_article-5948-2.html]: http://www.html5cn.org/article-5948-2.html
[SouthEast 9]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/bffd6a67707a40dc89111a3177206934.png