Python HTML和CSS 4：CSS常用文本样式与样式选择器

一、常用的应用文本的css样式

1.1、文本的css样式其实也就是给一段文本设置字体大小、颜色、背景色、是否加粗等等，如下：
- color 设置文字的颜色，如： color:red;
- font-size 设置文字的大小，如：font-size:12px;
- font-family 设置文字的字体，如：font-family:'微软雅黑';建议使用 'Microsoft YaHei',中文容易乱码
- font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜
  
  `font-style` 设置字体是否倾斜
- font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
- line-height 设置文字的行高，设置行高相当于在每行文字的上下同时加间距，如：line-height:24px;
  
  lineheight.jpg
- font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗字号/行高字体；如：font:normal 12px/36px 'Microsoft YaHei';
注意：font 值要求顺序的,不能错，否则会失效
- text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
  
  `text-decoration` 设置文字的下划线
- text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
  
  text-indent 设置文字首行缩进
- text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
建议：遇到不会的去 w3school 查找

二、css颜色表示法与CSS样式选择器

2.1、css颜色表示法(主要有三种)
- 第一种：颜色名表示，比如：red 红色，gold 金色
```
color: red;
```
- 第二种：rgb表示，比如：rgb(255,0,0) 表示红色
```
color: rgb(255,0,0);
```
- 第三种：16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00
```
color: #ff0000;
```
2.2、CSS样式选择器，常用的选择器有如下几种
- <1>、标签选择器：(不推荐使用)，此种选择器影响范围大，建议尽量应用在层级选择器中。如下
```
   
   CSS选择器
   


    这是第 1 个div
    这是第 2 个div
    这是第 3 个div
```
  提一下：*{font-size: 20px;},其中的 * 代表所有的选择器，范围太广，不建议使用，了解一下即可
  
  标签选择器：标签选择器，此种选择器影响范围大
  
  提示：从上面我们看出来，div 选择器会影响所有的 div 标签，如何区分不同的div标签来设置样式，我们看接着往下看
- <2>、id选择器：(不推荐使用)，通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，损耗资源，id名一般给程序使用，所以不推荐使用id作为选择器。如下
  
  id选择器
  
  id选择器在使用的是：#+id的名字+{},如上图
- <3>、类选择器：(推荐使用)，通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。类选择器可以先定义再使用，类选择器使用的是 .,如下代码
```
    
    CSS选择器
    



    这是第 1 个div
    这是第 2 个div
    这是第 3 个div
```
  类选择器：(推荐使用)
  提一下： class 后面可以设置多个 name，name之间用空格隔开，如下
```
这是第 2 个div
```
  WechatIMG1034.jpeg
- <4>、层级选择器：主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。如下
```
    
    层级选择器
    


     层级选择器：主要应用在选择父元素下的子元素，或者子元素下面的子元素，

可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
```
  - 提示：标签选择器一般都是用在层级选择器里面，不要单独使用，个别的地方可以单独使用
  - 当然你也可以在内嵌标签里面再定义class,在样式里面进行多层定义，如上面的 .box em,一般来说最多4层，再多性能就不好了
    层级选择器是用逗号隔开的
- <5>、组选择器：多个选择器，如果有同样的样式设置，可以使用组选择器。如下:格式是：各个选择器之间用 , 隔开
```
   
   组选择器
   


     我是第 1 个div
     我是第 2 个div
     我是第 3 个div
```
  组选择器使用的效果
  
  提示：三个标签的字体的大小、首行缩进的大小都是一样的，只有字体的颜色不一样，我们可以采用如上的组选择器方式来定义样式
- <6>、伪类及伪元素选择器：常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。如下
  - 伪类选择器 (在给标签设置鼠标悬浮在其上面的样式，如下面的 .box1:hover)
```
伪类与伪元素的使用
    


    我是第 1 个div
```
  - 伪元素选择器 ：(主要是下面：before 与 after 的使用),都是在添加内容
```
    
    伪类与伪元素的使用
    


    我是第 2 个div
    我是第 3 个div
```

Python HTML和CSS 4：CSS常用文本样式与样式选择器

你可能感兴趣的:(Python HTML和CSS 4：CSS常用文本样式与样式选择器)