CSS基础
- 基础认知
- 常见属性
- color
- font-size 字体大小
- background-color 背景颜色
- width 宽度
- height 高度
- 引入方式
-
内嵌式
-
外联式
- link引入
-
行内式
-
- 基础选择器
-
选择器的作用
- 选择对应标签，设置样式
-
标签选择器
- 标签名
- 选择的是一类标签，而不是单独的一个
- 无论嵌套多深都能找到
-
类选择器
- .类名
- 所有标签上都有class属性
- 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
- 一个标签可以同时有多个类名，类名之间以空格隔开
- 类名可以重复，一个类选择器可以同时选中多个标签
-
id选择器
- #id属性值
- 所有标签上都有id属性
- id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
- 一个标签上只能有一个id属性值
- 一个id选择器只能选中一个标签
-
通配符选择器
- *{}
- 很少会用，设置全部标签
-
- 字体和文本样式
-
字体样式
-
字体大小：font-size
- 默认大小16px，需要设置单位
-
字体粗细：font-weight
- 100-900之间的整数
-
字体样式：font-style
- 倾斜：italic
-
字体类型：font-family
-
字体类型：font属性连写
-
-
文本样式
-
文本缩进 text-indent
- 数字+px
- 数字+em
-
文本水平对齐方式 text-align
-
left
-
right
-
center
-
注意：
- 只能用在(需要给这些元素的父元素进行设置)
- 文本
- span标签 a标签
- input标签 img标签
- margin: 0auto
- 如果是div p h 水平居中就用这个
- 只能用在(需要给这些元素的父元素进行设置)
-
-
文本修饰 text-decoration
- underline下划线
- line-through 删除线
- none无
-
-
line-height行高
-
作用：控制一行的上下行间距
-
取值：数字+px
-
应用
- 让单行文本垂直居中可以设置 line-height : 文字父元素高度
- 网页精准布局时，会设置 line-height : 1 可以取消上下间距
-
-
CSS进阶
- 选择器进阶
-
后代选择器
- 使用空格隔开
- 注意：空格前后分别只能有一个元素
-
子类选择器(CSS中使用)
- 选择器1>选择器2
- 注意：
- 只能在儿子标签中找
-
并集选择器
- 语法：选择器1 ， 选择器2 { css }
- 每组选择器可以是基础选择器或者复合选择器
-
交集选择器
- 选择器1选择器2 { css }
- 注意
- 交集选择器中的选择器之间是紧挨着的，没有东西分隔
- 如果有标签选择器，标签选择器必须写在最前面
-
emmet语法
- 生成div类选择器: .类名
- 生成id选择器 #id
- 生成交集选择器 .类名**#id**
- 生成子代选择器 ul>li
- 内容文本 ul>li{文本}
- 创建多个 ul>li*3
-
hover伪类选择器
- 作用：鼠标触摸该元素时，可以改变样式
- 选择器:hover { css }
-
- 背景相关属性
-
- 背景颜色
- background-color（bgc）
- 属性
- 默认透明
- rgba(0,0,0,0),transparent
- 不会影响盒子大小位置
- 默认透明
-
- 背景图片
- background-image(bgi)
- url可以省略引号
- 默认水平和垂直方向平铺
- 背景图片不能撑开盒子
-
- 背景平铺
- background-repeat（bgr）
- 属性
- repeat 水平垂直方向都平铺
- no-repeat 不平铺
- repeat-x 沿着水平方向平铺
- repeat-y 沿着垂直方向平铺
-
- 背景位置
-
background-position（bgp）
-
属性
- 方位名词
- 水平方向
- left
- center
- right
- 垂直方向
- top
- center
- bottom
- 水平方向
- 数字+px
- 图片左上角为坐标原点
- 方位名词
-
第一个为水平，第二个为垂直
-
- 背景相关属性
- 连写形式
- background (bg)
- 空格隔开
- 注意
- 如果要设置单独的样式
- 要么把单独写在连写下面
- 要么把单独写在连写里面
- 如果要设置单独的样式
-
- 属性连写
-
- 元素显示模式
-
块级元素
-
display:block
-
特点
- 独占一行
- 宽度默认，高度撑开
- 可以设置宽高
-
标签
- div p h系列
- ul li form
-
-
行内元素
-
display:inline
-
特点
- 一行可以显示多个
- 宽高可以撑开
- 不可以设置宽高
-
代表标签
- a,span
-
-
行内块元素
- display：inline-block
- 特点：
-
一行可以显示多个
-
可以设置宽高
-
代表
- input textarea button select
-
image其实是行内块
-
-
元素显示模式转换
-
嵌套规范
-
块级一般作为大容器，可以嵌套：文本、块级元素、行内元素等
-
但p中不要嵌套div、p、h等块级元素
-
a标签内部可以嵌套任意元素
- a不能嵌套a标签
-
-
居中方法总结
-
- CSS三大特性
-
继承性
-
默认集成父元素样式
-
常见场景
- 可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式
- 直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小
-
继承失效情况
- a标签color失效
- h系列标签font-size会失效
- div的高度不能继承，但宽度有类似继承的效果
-
-
层叠性
-
优先级
-
盒子模型
- CSS 三大特性
- 优先级
-
不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
-
继承 < 通配符选择器 < 标签选择器 < 类选择器 <id选择器<行内样式<!important
-
注意:
- !important写在属性值的后面，分号的前面！
- !important不能提升继承的优先级，只要是继承优先级最低！
- 实际开发中不建议使用 !important 。
-
- 权重叠加公式
- 注意：
- !important如果不是继承，则权重最高
- 注意：
- 优先级
- PxCook的基本使用
- 盒子模型
-
每个标签都可以看做一个盒子
-
每个盒子由内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成
-
内容区域
- 设置宽高是width、height
-
边框区域
- border : 10px solid red;
- 设置粗细
- 边框样式
- 边框颜色
-
内边距
-
自动内减
- box-sizing : border-box;
-
外边距
-
应用
-
清除默认的
- padding :0;
- margin : 0;
-
注意：
-
垂直布局 的 块级元素，上下的margin会合并
- 只给其中一个盒子设置margin即可
-
互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上
- 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
-
- 给父元素设置overflow：hidden
-
- 转换成行内块元素
-
- 设置浮动
-
垂直方向的margin和padding布局中无效！
-
-
-
CSS布局
- 结构伪类选择器
- 作用：查找元素
- 优势：减少对类选择器的依赖
- 伪元素
- 标准流
- 浮动
- 清除浮动
我的开源
Comments | 0 条评论