css基础篇1

布兰妮甜

已于 2024-07-26 10:49:02 修改

阅读量723

点赞数 12

文章标签： css 前端

于 2024-07-25 17:43:32 首次发布

本文链接：https://blog.csdn.net/chaosweet/article/details/140694888

版权

诗、美、浪漫、爱，这些才是我们生存的原因

基础选择器
- 标签选择器 p{color: #f00;}
- 类选择器 .nav{color: #f00;}
- id选择器 #nav{color: #f00;}
- 通配符选择器 *{color: #f00;}
复合选择器
- 后代选择器
  - 元素1 元素2 {样式声明}
    - 元素1和元素2中间用空格隔开
    - 元素1是父级，元素2是子级，最终选择的是元素2
    - 元素2可以是儿子，也可以是孙子，只要是元素1的后代即可
    - 元素1和元素2可以是任意基础选择器
- 子选择器
  - 元素1>元素2 {样式声明}
    - 元素1和元素2中间用大于号隔开
    - 元素1是父级，元素2是子级，最终选择的是元素2
    - 元素2必须是亲儿子，其孙子，重孙之类都不归他管
- 并集选择器
  - 元素1,元素2 {样式声明}
    - 元素1和元素2中间用逗号隔开
    - 逗号可以理解为和的意思
    - 并集选择器通常用于集体声明
- 伪类选择器
  - :focus：用于选取获得焦点的表单元素
  - 链接伪类选择器
    - 确保生效，需按照 lvha 的循顺序声明 :link :visited :hover :active
```
/* 1.未访问的链接 a:link */
a:link {
	color: gold;
	text-decoration: none;
}
/* 2. 选择点击过的 已访问过的链接 a:visited */
a:visited {
	color: green;
}
/* 3. 鼠标经过时候的  a:hover */
a:hover {
	color: indigo;
}
/* 4. 鼠标按下未弹起时候的 a:active */
a:active {
	color: lightcoral;
}
```

字体：font-family
- 各种字体之间必须使用英文状态下的逗号隔开
- 一般情况下，如果有空格隔开的多个单词组成的字体，加引号
字体大小：font-size 单位 px
字体粗细：font-weight
- normal：不加粗 (等同于400，数字后面不加单位)
- bold：加粗 (等同于700，数字后面不加单位)
字体样式：font-style
- normal：不加粗 (默认值)
- italic：倾斜

复合写法： font: font-style font-weight font-size/line-height font-family;

注意：font字体连写是有顺序的，不能随意更换位置，其中字体和字体大小是必须指定的

文本颜色：color
- 预定义的颜色值：red，green，blue
- 十六进制：#ff0，#f60，#29d794
- RGB：rgb(255,0,0)或rgb(100%,0%,0%)
文本对齐：text-align
- left：左对齐 (默认值)
- center：居中对齐
- right：右对齐
文本装饰：text-decoration
- none：默认值
- underline：下划线
- overline：上划线
- line-through：删除线
首行缩进：text-indent
- em是一个相对单位，就是当前元素(font-size)1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小
行高：line-height
- 行高 = 上间距 +文本高度 + 下间距 (行高 = 高)

背景颜色：background-color: transparent(默认值)
背景图片：background-image
- none：默认值
- url：使用绝对或相对地址指定背景图像
背景平铺：background-repeat
- repeat：背景图像在纵向和横向上平铺(默认值)
- no-repeat：背景图像不平铺
- repeat-x：背景图像横向平铺
- repeat-y：背景图像纵向平铺
背景图片位置：background-position
- length：百分数|由浮动数字和单位标识符组成的长度值
- position：top|center|bottom|left|right 方位名词
- 参数说明
  - 参数是方位名词
    - 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left 效果一致
    - 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
  - 参数是精准单位
    - 如果参数值是精准坐标，那么第一个肯定是x坐标，第二个一定是y坐标
    - 如果只指定一个数值，那该数值一定是x坐标,另一个默认垂直居中
  - 参数是混合单位
    - 如果指定的两个值是精准单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标
背景图片固定：background-attachment
- scroll：背景图像随对象内容滚动
- fixed：背景图像固定

复合写法：background:transparent url(image.jpg) repeat-y fixed top;

行内样式表 (行内式)： style是标签的属性
内部样式表 (嵌入式)：一般放在文档的<head>标签中
外部样式表 (链接式)：新建后缀名为.css的文件，把所有css代码放入此文件中，通过link标签引入该文件
- rel：定义当前文档与被链接文档之间的关系,在这里需要指定为"stylesheet",表示被链接的文档是一个样式表文件
- href：定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径