分组与嵌套、伪类选择器、伪元素选择器、选择器优先级、css属性相关

标签：enter   开头   att   继承   优先   pre   tomat   :focus   rgba   

* 分组与嵌套
* 伪类选择器
* 伪元素选择器
* 选择器优先级
* css属性相关(操作标签样式)

### 分组与嵌套

```python
div,p,span {  /*逗号表示并列关系*/
            color: yellow;
        }
#d1,.c1,span  {
            color: orange;
        }
```

### 伪类选择器

```html









小轩在不在?
点我有你好看哦




```

### 伪元素选择器

```python
p:first-letter {
            font-size: 48px;
            color: orange;
        }
p:before {  /*在文本开头 同css添加内容*/
            content: ‘你说的对‘;
            color: blue;
        }
p:after {
            content: ‘雨露均沾‘;
            color: orange;
        }
ps:before和after通常都是用来清除浮动带来的影响:父标签塌陷的问题(后面马上讲)
```

### 选择器优先级

```python
"""
id选择器
类选择器
标签选择器
行内式

"""











贤妻果然很识趣，有前途~



```

# css属性相关

```PYTHON

```

### 字体属性

```python
p {
            /*font-family: "Arial Black","微软雅黑","...";  !*第一个不生效就用后面的 写多个备用*!*/

            /*font-size: 24px;  !*字体大小*!*/

            /*font-weight: inherit;  !*bolder lighter 100~900 inherit继承父元素的粗细值*!*/

            /*color: red;  !*直接写颜色英文*!*/
            /*color: #ee762e;  !*颜色编号*!*/
            /*color: rgb(128,23,45);  !*三基色 数字  范围0-255*!*/
            /*color: rgba(23, 128, 91, 0.9);  !*第四个参数是颜色的透明度 范围是0-1*!*/

            /*当你想要一些颜色的时候 可以利用现成的工具
                1 pycharm提供的取色器
                2 qq或者微信截图功能
                     也可以多软件结合使用 
            */
        }
```

### 文字属性

```python
p {
            /*text-align: center;  !*居中*!*/
            /*text-align: right;*/
            /*text-align: left;*/
            /*text-align: justify;  !*两端对齐*!*/

            /*text-decoration: underline;*/
            /*text-decoration: overline;*/
            /*text-decoration: line-through;*/
            /*text-decoration: none;*/
            /*在html中 有很多标签渲染出来的样式效果是一样的*/
            font-size: 16px;
            text-indent: 32px;   /*缩进32px*/
        }
        a {
            text-decoration: none;  /*主要用于给a标签去掉自带的下划线  需要掌握*/
        }
```

### 背景图片

```html















```

### 边框

```html









穷人  被diss到了  哭泣.png

妈拉个巴子,妈拉个巴子,妈拉个巴子,妈拉个巴子




```

### display属性

```PYTHON









div1

div2

单纯的隐藏 位置还在
  
div4










```

### 盒子模型

```python
"""
盒子模型
   就以快递盒为例
      快递盒与快递盒之间的距离(标签与标签之间的距离 margin外边距)
      盒子的厚度(标签的边框 border)
      盒子里面的物体到盒子的距离(内容到边框的距离  padding内边距)
      物体的大小(内容 content)


   如果你想要调整标签与标签之间的距离 你就可以调整margin

   浏览器会自带8px的margin，一般情况下我们在写页面的时候，上来就会先将body的margin去除

"""















ppp




```

### 浮动

```python
"""浮动的元素 没有块儿级一说 本身多大浮起来之后就只能占多大"""
只要是设计到页面的布局一般都是用浮动来提前规划好

```

分组与嵌套、伪类选择器、伪元素选择器、选择器优先级、css属性相关

标签：enter   开头   att   继承   优先   pre   tomat   :focus   rgba   

原文地址：https://www.cnblogs.com/0B0S/p/12882463.html