python51 css重点 1.选择器 2.布局

Posted 2022-03-06 llx--20190411

## 复习

```python
"""
1、html：
 标记语言：解释性，没有逻辑（有无效果）
 常用标签（指令<!...>、转义字符&...;、标签<英文数字->）
  h1~h6 p a img div span i b ul>li table>tr>th|td form>input|select(option)|textarea|button|label
 嵌套关系(架构)：div完成主架构、span完成同行文本架构 -> 具体内容选取具体标签
 
2、css：
 标记语言：解释性，没有逻辑（有无效果）
 引入方式 （行间式、内联式、外联式）
 选择器：!important > 行间式 > id > class > 标签 > *
 学习三个方向：引入方式、选择器、具体样式
"""
```

 

## 今日内容

```python
"""
css：重点 - 选择器、布局
 高级选择器
 伪类选择器
 常用样式
 三种布局方式
"""
```

 

## form提交方式：了解

```python
"""
get: 不安全的提交数据，高效
post: 安全的提交数据，低效
前台都可以给后台提交数据，后台一定会给前台一个反馈结果
"""
```

 

## 选择器高级

```css
/*选择器高级：基础选择器的各种组合*/

/*1、群组选择器：控制多个*/
/*注：每一个选择器位，可以为id、class、标签、选择器组合*/
#h1, .p, .a
    color: red;

/*2、后代(子代)选择器：控制一个标签，前方的都是修饰*/
body .div2 .p2   /*后代 空格，父子(孙)*/
    color: orange;

.div2 > div > .p2   /*子代 >，父子*/
    color: pink;

/*高级选择器通过权重（个数）区别优先级:*/

 

/*3、兄弟(相邻)选择器：控制一个标签，前方的都是修饰*/
.p3 ~ .i3    /*兄弟 ~，可相邻也可不相邻，但必须通过上方修饰下方*/
    color: greenyellow;

.div3 + .i3    /*相邻 +，必须相邻，但必须通过上方修饰下方*/
    color: green;

/* 高级选择器优先级
前提：多个选择器控制同一个标签

无限大于：id > class > 标签   eg：一个id选择器 高于 n和类与标签选择器的组合
种类相同：比个数 eg：两个先比较id的个数，谁多谁优先级高，相同再比较类，以此类推
个数相同：比顺序 eg：所有类型所有个数(id、类、标签)都相同，下方的起作用
高级选择器种类不影响优先级 eg：后代选择器、子代选择器、兄弟选择器...不会运行优先级
*/
```