CSS样式浅识

短命女 2021-09-23 09:00 220阅读 0赞

### CSS样式浅识 ###

*  一、css样式特性
 *   *   *  1. 继承
         *  2. 特殊
         *  3. 层叠
         *  4. 重要
 *  二、格式化排版
 *   *   *  1. 文字排版
         *   *   *  1. 字体
                 *  2. 字号、颜色
                 *  3. 文字样式
         *  2. 段落排版
         *   *   *  1. 缩进
                 *  2. 行间距（行高）
                 *  3. 中文字间距、字母间距
                 *  4. 对齐

# 一、css样式特性 #

### 1. 继承 ###

CSS的某些样式是具有继承性的，继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。

p{ 
    	color:red;
    }
    <p>这是一个主句<span>分句</span></p>

该句子会被渲染成red颜色，主要是span在p内会继承它的属性。

**但有一些css样式是不具有继承性的。** 如`border:1px solid red;`

### 2. 特殊 ###

权值的规则：标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。  
还有一个权值比较特殊–继承也有权值但很低，低于标签的权值，可以理解为继承的权值最低。

p{ color:red;} 			/*权值为1*/
    p span{ color:green;} 	/*权值为1+1=2*/
    .class{ color:blue;} 	/*权值为10*/
    p span .class{ color:purple;} /*权值为1+1+10=12*/
    #id .class p{ color:yellow;} /*权值为100+10+1=111*/

### 3. 层叠 ###

层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。

li{ 
                color:red;
            }
            li{ 
                color: green;
            }

该结果为显示green颜色。

css样式优先级：  
**内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。**

### 4. 重要 ###

有些特殊的情况需要为某些样式设置具有最高权值，可以使用`!important`来解决。

p{ color:red !important;}
    p{ color:green}

该结果为显示red颜色。

样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住`!important`优先级样式是个例外，权值高于用户自己设置的样式。

# 二、格式化排版 #

### 1. 文字排版 ###

##### 1. 字体 #####

使用css样式为网页中的文字设置字体、字号、颜色等样式属性。

body{ font-family:"Microsoft Yahei";}  /*微软雅黑字体，一般不用中文，这样兼容性比较高*/

**注意**不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。

##### 2. 字号、颜色 #####

设置网页中文字的字号和颜色：

body{ font-size:12px;color:red}  /*设置字号为12像素，颜色为红色*/

##### 3. 文字样式 #####

使用css样式来改变文字的样式：粗体、斜体、下划线、删除线，这样就可以减少标签的使用，更具有灵活性。

1.  粗体

p{ font-weight:bold;}   /*设置文字为粗体，类似strong标签*/

1.  斜体

p{ font-style:italic;}   /*设置文字为斜体，类似em标签*/

1.  下划线

p{ text-decoration:underline;}

1.  删除线

p{ text-decoration:line-through;}

### 2. 段落排版 ###

##### 1. 缩进 #####

p{ text-indent:2em;}

2em的意思就是文字的2倍大小。

##### 2. 行间距（行高） #####

p{ line-height:1.5em;}

实现设置段落行间距为1.5倍。

##### 3. 中文字间距、字母间距 #####

p{ 
        letter-spacing:50px;
    }

设置字母与字母之间的间距。中文就是每个字的间距。

##### 4. 对齐 #####

h1{ 
        text-align:center;  /*将当前样式居中*/
    }
    h2{ 
        text-align:left;  /*将当前样式居左*/
    }
    h3{ 
        text-align:right;  /*将当前样式居右*/
    }