CSS简介
- 什么是CSS
- CSS是重叠样式表，主要负责标签样式的编辑，美化页面
- 一个网页分为三大部分：
- 结构层：主要由html负责，用来书写页面的结构
- 表现层：主要由CSS负责，主要用来书写页面的展示样式，美化页面
- 行为层：主要由js负责，主要用来处理页面和用户的交互效果
- CSS是单独的一种文件类型，后缀是.css的文件
- CSS的三种引进方式
- 行间样式：
- 给标签添加style属性，值就是你要设置的CSS样式
- 嵌入式：
- 将CSS代码写在head标签内的style标签内
- 外链式：
- 在head标签内通过link单标签的href属性引入外部CSS文件
- 行间样式：
- CSS语法结构：
- p {color:blue}
- 其中p代表的是选择器，用来和html中的标签进行关联；color是要设置的CSS属性；blue代表了CSS属性的值
- p {color:blue}
- CSS选择器
- 用来选取要设置的html标签
- 标签选择器：通过标签名来查找元素
- 选择符：标签名
- 影响范围最大，一般很少单独使用
- id选择器：通过标签的id属性的值来获取元素
- 选择符：#
- id属性的值不能重复，一个id值在一个html文件中只能出现一次
- 影响范围最小
- class选择器：通过元素的class的属性的值来获取元素
- 选择符：.
- 一个class属性的值可以被多个标签使用
- 影响范围介于id选择器和标签选择器之间
- 引入方式的优先级：
- 嵌入式
- 外链式
- 行间样式
- 当使用以上三种方式对同一标签进行设置时，谁离得被设置标签最近谁就生效
- 三种基本选择器的优先级
- 标签选择器< 类选择器 < id选择器
- 谁的影响范围大谁的优先级就低
- 关系选择器
- 后代选择器：选择符 空格
- 选择指定标签内的所有符合要求的标签，忽略层级关系
- 子元素选择器：选择符>
- 只能获取指定元素的直接子元素
- 并集选择器（组选择器/并列选择器）：
- 选择符，
- 一次性给多个元素设置同样的样式
- 伪类选择器： ：hover
- 当鼠标移入指定元素时，修改当前元素的样式
- 伪元素选择器：
- after 在指定元素内部的后面插入指定的内容
- before 在指定元素的内部前面插入指定的内容
- 以上两个选择器需要配合content使用
- 后代选择器：选择符 空格
- CSS常用的属性
- CSS颜色的表示方式
- A.直接使用单词来表示
- B.十六进制表示方式
- 取值范围0-9 a-f
- 一共有六位十六进制数来表示最终显示的颜色，每两个数为一组，分别代表红、绿、蓝
- C.十进制数表示方式
- 由三个十进制的数字来表示最终的颜色，数字的取值范围0-255，使用方法为rgb(10,15,220)
- D.带透明度的颜色表示
- rgba(1,1,1,0.2)
- 用法同上，最后一位数字是0-1之间的小数，表示透明度
- 背景属性
- background-color 背景颜色
- background-image 背景图片
- background-position 背景图片位置
- background-repeat 背景图片是否重复
- 字体属性
- color 字体颜色
- font-size 字体大小
- font-weight 是否加粗
- font-family 字体类型
- font-style 是否倾斜
- 边框属性：
- border-top:上边框
- border-left:左边框
- border-right 右边框
- border-bottom 下边框
- 内间距
- 设置元素边界距离内部内容之间的距离，会在原本宽高的基础上加上间距的大小
- 会改变元素的实际大小
- padding-top: 上间距
- padding-left:左间距
- padding-right:右间距
- padding-bottom 下间距
- 简写
-
如果只给一个值代表四边的间距
-
如果是四个值 从上开始 依次顺时针旋转 每个值代表一个边
-
如果三个值 第一个值是上 第二个值是左右 第三个值是下
-如果是两个值 第一个值是上下 第二个值是左右的 -
padding:50px;
-
padding:10px 20px 30px 40px;
-
padding:10px 20px 30px;
-
padding:20px 50px;
-
- 外间距
- 设置元素距离四周外部元素之间的间距
- margin 用法同padding一样
- CSS颜色的表示方式
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
