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