css学习笔记
2022-06-17 21:18:57 86 举报AI智能生成
前端css基础复习梳理
作者其他创作
大纲/内容
是一组样式设置的规则，用于控制页面的外观样式
什么是CSS
实现内容与样式的分离，便于团队开发
样式复用，便于网站的后期维护
页面的精确控制，让页面更精美
为什么使用CSS
页面外观美化
布局和定位
CSS作用
CSS简介
选择器：要修饰的对象（东西）
属性名：修饰对象的哪一个属性（样式）
属性值：样式的取值
CSS语法
也称为内嵌样式，在页面头部通过style标签定义
对当前页面中所有符合样式选择器的标签都起作用
内部样式
也称为嵌入样式，使用HTML标签的style属性定义
只对设置style属性的标签起作用
行内样式
使用单独的 .CSS 文件定义，然后在页面中使用 link标签 或 @import指令 引入
使用 link标签 链接外部样式文件
@import 指令 导入外部样式文件
外部样式
CSS应用方式
基本用法
也称为元素选择器，使用HTML标签作为选择器的名称
以标签名作为样式应用的依据
标签选择器
使用自定义的名称，以 . 号作为前缀，然后再通过HTML标签的class属性调用类选择器
以标签的class属性作为样式应用的依据
类选择器
注意事项：调用时不能添加 . 号同时调用多个类选择器时，以 空格 分隔类选择器名称不能以 数字 开头
使用自定义名称，以 # 作为前缀，然后通过HTML标签的id属性进行名称匹配
以标签的id属性作为样式应用的依据，一对一的关系
ID选择器
基础选择器
标签选择器和类选择器、标签选择器和ID选择器，一起使用
必须同时满足两个条件才能应用样式
复合选择器
也称为集体声明
将多个具有相同样式的选择器放在一起声明，使用逗号隔开
组合选择器
在某个选择器内部再设置选择器，通过空格隔开
只有满足层次关系最里层的选择器所对应的标签才会应用样式
嵌套选择器
注意：使用 空格 时不区分父子还是后代，使用CSS3中新增的 > 时必须是父子关系才行
:link 未访问的链接
:visited 已访问的链接
:hover 鼠标悬浮到连接上，即移动在连接上
:active 选定的链接，被激活
伪类选择器
根据不同的状态显示不同的样式，一般多用于 标签
:first-letter 为第一个字符的样式
:first-line 为第一行添加样式
:before 在元素内容的最前面添加的内容，需要配合content属性使用
:after 在元素内容的最后面添加的内容，需要配合content属性使用
伪元素选择器
子主题
复杂选择器
选择器
行内样式>ID选择器>类选择器>标签选择器
优先级
后加载会覆盖先加载的同名样式
就近原则
原因：按照书写顺序依次加载，在同优先级的前提下，后加载的会覆盖先加载的同名样式，所以离的越近越优先
内外部样式加载顺
可以使用!important使某个样式有最高的优先级
!important
选择器优先级
inherited继承，默认从父标签继承字体大小（默认值），所有CSS属性的默认值都是inherited
px像素 pixel
%百分比，相对父标签字体大小的百分比
em倍数，相对于父标签字体大小的倍数
font-size\t大小、尺寸\t可以使用多种单位
normal普通（默认）
bold粗体
自定义400 normal 700 bold
font-weight\t粗细
要求系统中要安装指定的字体
一般建议写3种字体：首选、其次、备用。以逗号隔开
font-family\t字体
normal普通
italic斜体
font -style 样式
简写属性：font:font-style|font-weight|font-size|font-family
必须按此顺序书写
font 简写
字体属性
颜色名称：使用英文单词
16进制的RGB值：#RRGGBB
特定情况下可以缩写
取值
color\t颜色
line-height\t行高\t行之间的高度
text-align\t水平对齐方式\t取值：left、center、right
vertical-align\t垂直对齐方式\t取值：top、middle、bottom可以用于图片和文字的对齐方式
text-indent\t首行缩进
text-decoration\t文本修饰\t取值：underline、overline、line-through
text-transform\t字母大小写转换\t取值：lowercase、uppercase、capitalize首字母大写
letter-spacing\t字符间距
word-spacing\t单词间距\t只对英文有效
white-space\t空白的处理方式\t文本超出后是否换行，取值：nowrap
文本属性
取值：transparent 透明
颜色单词等类似于color属性
background-color\t背景颜色
必须使用url()方式指定图片的路径
如果是在css样式文件中使用相对路径，此时是相对于css文件，不是相对html文件
background-image\t背景图片
background-repeat\t背景图片的重复方式
关键字：top、bottom、left、right、center
含 义：将网页中许多非常小的图标/图片整合到一张大图中，当访问面面时只需要下载一次，可以减少访问服务器的次数，提高性能
原理：使用background-position进行背景定位，使用坐标精确地定位出背景图片的位置
CSS雪碧图
background-position\t背景图片的显示位置
取值：scroll(默认)、fixed固定不动
background-attachment\t背景图片是否跟随滚动
简写属性：background:background-color|background-image|background-repeat|background-position
以空格隔开，书写顺序没有要求
background\t简写
背景属性
取值：none、disc、circle、square、decimal
此时不再区分有序列表还是无序列表，只要设置列表前的标记就可以了
list-style-type\t设置列表前的标记
list-style-image\t将图像作为列表前的标记
list-style-position\t设置标记的位置\t取值：outside(默认)、inside
简写属性：list-style:list-style-type|list-style-image|list-style-position
书写顺序没有要求
list-style\t简写
列表属性
取值：separated（默认） collapse
border-collapse:表格中相邻的边框是否合并（折叠）为单一边框
表格属性
常用CSS属性
css学习笔记
0 条评论
下一页
