CSS-part1
一. CSS选择器
1.css引入方式
Title
来冲啊
css样式后面的样式会将前面的覆盖
2.基本选择器
Title
111
222
333
3.选择器后代与兄弟
Title
我是你爹
哈哈啊哈哈哈
-
-
孙庆军
-
给我冲
-
快点
我是儿子
hello world
-
-
what
-
are you doing
4.交并集选择器
Title
-
我是孙庆军
我想冲
点我啊
恩额嗯
5.序列选择器
Title
what
我是段落1
我是段落2
我是段落3
我是段落4
我是段落5
6.属性选择器
后代选择器
哈哈啊
我是段落
我是段落
我是段落
我是我
http://www.baidu.com
https://www.baidu.com
我是段落
我是段落
7.伪类选择器
Title
啥鬼额
用户名:
8.伪元素选择器
Title
hello world
9.css三大特性
1. 继承性
定义: 给某一个元素设置一些属性中. 该元素后代也可以使用. 这个就是继承性
注意:
1. 只有以color.font-.text-.line-开头的属性才可以继承
2. a标签的文字颜色和下划线是不能继承别人的
3. h标签的文字大小是不能继承别人的. 会变大. 但会在原来字体的基础上变大
应用场景:
通常基于继承性同一设置网页的文字颜色. 字体. 文字大小等样式
2. 层叠性
定义: css: Cascading StyleSheet层叠样式表.层叠性指的是css处理冲突的一种能力
多个选择器选中一个标签会产生覆盖效果
注意:
1. 层叠性只有在多个选择器选中了同一个标签. 然后设置了相同的属性. 才回发生层叠性
3. 优先级
定义: 当多个选择器选中同一个标签.并且给同一个标签设置相同的属性时. 如何层叠就由优先级来决定
优先级:
整体优先级从高到低: 行内样式>嵌套样式和外部样式
1. 大前提: 直接选中>间接选中(即继承而来的)
#1、以下为直接选中
#2、以下为间接选中
-
我是span
2. 如果都是直接选中. 那么谁离目标标签比较近. 就听谁的
后代选择器
-
我是span
3. 如果都是直接选中. 并且都是同类型的选择器. 那么就是谁写的后面就听谁的
后代选择器
-
我是span
4. 如果都是直接选中，并且是不同类型的选择器，那么就会按照选择器的优先级来层叠
id > 类 > 标签 > 通配符(也算直接选中) > 继承 > 浏览器默认（即没有设置任何属性）
5. 添加!important可强制修改优先级
* {
color: yellow !important;
}
二. CSS样式布局
1.文字属性
Title
一行白鹭上青天
2.文本属性
Title
你干嘛...
3.背景属性
Title
12739812379
fasdfasd
背景图片和插入图片的区别:
1、
背景图片仅仅只是一个装饰，不会占用位置，
插入图片会占用位置
2、
背景图片有定位属性，可以很方便地控制图片的位置，
而插入图片则不可以
3、
插入图片语义比背景图片的语义要强，所以在企业开发中如果你的图片
想被搜索引擎收录，那么推荐使用插入图片
4.导航条拼接
练习：累计成一个大背景可以减少带宽，流量
前端优化方式：1.静态文件压缩，下载到本地，减少空间
2.使用精灵图，减少发送网络io次数
Title
5.精灵图
Title
6.盒子边框
Title
11111
7.内边距
注意:
1 给标签设置内边距后，标签内容占有的宽度和高度会发生变化，设置padding之后标签内容的宽高是在原宽高的基础上加上padding值。如果不想改变实际大小，那就在用宽高减掉padding对应方向的值
2 padding是添加给父级的，改变的是父级包含的内容的位置
3 内边距也会有背景颜色
Title
我是文字我是文字
我是文字我是文字
我是文字我是文字
我是文字我是文字
我是文字我是文字
8.外边距
一、！！！css显示模式:块级、行内、行内块级
在HTML中HTML将所有标签分为两类，分别是容器级和文本级
在CSS中CSS也将所有标签分为两类，分别是容器级是块级元素和行内元素
#1、HTML中容器级与文本级
容器级标签：可以嵌套其他的所有标签
div、h、ul>li、ol>li、dl>dt+dd
文本级标签：只能嵌套文字、图片、超链接
span、p、buis、strong、em、ins、del
#2、CSS中块级与行内
块级：块级元素会独占一行，所有的容器类标签都是块级，文本标签中的p标签也是块级
div、h、ul、ol、dl、li、dt、dd 还有标签p
行内：行内元素不会独占一行，所有除了p标签以外的文本标签都是行内
span、buis、strong、em、ins、del
行内块级
img
#3、块级元素与行内元素的区别
1、块级元素block
独占一行
可以设置宽高
若没有设置宽度，那么默认和父元素一样宽（比如下例中的div的父元素是body，默认div的宽就是body的宽）
若没有设置宽高，那么就按照设置的来显示
2、行内元素inline
不会独占一行
不可以设置宽高
盒子宽高默认和内容一样
3、行内块级元素inline-block
不会独占一行
可以设置宽高
二、！！！CSS显示模式转换
可以通过标签的display属性设置显示模式
none HTML 文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用
block 块级
inline 行内
inline-block 行内块级
display:"none"与visibility:hidden的区别：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
Title
1111
22222
333
4444
5555
9.盒子居中及内容居中
Title
你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊
10.文字溢出
Title
fadfkadjsfkljdddddddkaldfja;ldsfjdkl;ajfkl;djfkadlksfjdklfjadklfjadslk
fasdkffadsfasdfasdfasdfdasfadsfddsjf