CSS基础之选择器/字体样式/文本样式/背景属性/元素显示模式/三大特性

1. css基础认知

• css是层叠样式表
• 写在标签内，配合选择器进行样式的书写

2. css的引入方式

• 行内(写在标签内部 style="color:red;font-size:16px;")
• 内嵌(写在html的head标签内<style></style>)
• 外联(link rel="stylesheet" href="css文件url" 引入css)

3. 基础选择器

• 标签选择器 tag名
• 类选择器 .class名 (类名可重复，由字母、下划线、数字、中划线组成，不能以后两种开头)
• id选择器 #id名
• 通配符选择器 * {}

4. 字体样式和文本样式

4.1 字体样式

• font-family 字体系列 每种字体之间用逗号隔开 从左往右显示
• font-size 字体大小 数字+px (谷歌浏览器默认16px)
• font-weight 字体粗细 normal/bold对应400/700 可取100~900的整百数
• font-style 字体样式 normal/italic 倾斜与否
• font:style weight size/line-height family 必须按顺序连写
  注意：层叠性，写在最下面的生效
  必须按此顺序写，其中字号和字体不可省略
  标题标签h1-6比较特殊，需要单独指定文字大小

4.2文本样式

• color 文本颜色 四种取值形式见4.4
• text-indent 文本第一行的缩进 数字+px / 数字+em(1em=当前标签的font-size的大小) 如果当前元素没有设置大小，则会按照父元素的1个文字大小
• text-align 对齐方式 left/center/right 注意：需要让文本水平居中，text-align属性是给文本所在标签设置，此属性能让文本/span/a/input/img标签水平居中，maigin:0 auto;可以使div/p/h大盒子水平居中，注意是给有宽度的元素本身加
• text-decoration 文本装饰 underline/line-through/overline/none

4.3 line-height行间距

• 行高 = 上间距 + 文本高度 + 下间距
• 取值：数字 + px / 当前标签的font-size的倍数
• line-height = 文字父元素高度可以使得单行文本垂直居中
• line-height:1; 可以取消默认的上下间距
  注意：font连写需要写在line-height的前面，因为完整的font连写是font:style weight size/line-height family

4.4颜色常见取值

• color/background-color属性
• 属性值
  • 英文关键词 red
  • rgb (255,255,255)
  • rgba rgba(255,255,0,0.5) aphla控制透明度0~1
  • 16进制 #000000 2red2green2blue

5. 复合选择器

在基础选择器之上，对其进行组合形成

5.1 后代选择器

选择器1 选择器2 {css}
符号是空格

5.2 子代选择器

父选择器 > 子选择器 {css}
符号是大于
注意:子代只包括儿子

5.3 并集选择器

选择器1 , 选择器2 {css}
符号是逗号

5.4 交集选择器

选择器1选择器2 {css}
注意：如果交集选择器中有标签选择器，标签选择器必须写在最前面

5.5 伪类选择器

• 链接伪类 a:link/visited/hover/active/ {css} **必须按此顺序lvha
• :focus选择器 input:focus 选择获得光标的表单

6. 背景相关属性

• background-color 背景颜色 默认为透明色transparent
• background-image:url() 背景图片 默认在水平和垂直方向平铺，且背景图片和颜色都不能撑开盒子
• background-repeat:repeat(默认在水平和垂直方向平铺)/no-repeat/repeat-x/repeat-y 背景平铺
• background-size:length(设置宽高px或者%，可能会变形)/cover(可能会被裁)/contain(等比缩放，可能不能完全填满)
• background-position: 方位名词/数字+px 背景图片位置
  • 方位名词
    • 如果两个值都是方位名词，如background-position:center top;则先后顺序不重要
    • 如果只指定了一个方位，则默认第二个是center居中
  • 精确数字
    • 第一个必须是x坐标（到左侧），第二个必须是y坐标（到顶部）
    • 如果只指定了一个x，则另一个是垂直居中
  • 混合模式
    • 方位和精确值混用，第一个必须是x坐标，第二个必须是y坐标
• background-attachment:scroll（背景随对象内容滚动）、fixed;（视差滚动效果）
  设置背景图像是否固定或者随着页面的其余部分滚动
• background: color url() repeat fixed position/size 连写
• background:rgba(0,0,0,0.3) 背景颜色半透明 只是让背景色半透明，盒子中的内容不受影响
• img标签和背景图片的区别：
  • img标签不设置宽高默认会以图片的原尺寸显示
  • div + 背景图片 需要给div设置宽高，背景图片不能撑开div

7. 元素显示模式

元素以什么方式进行显示，如<div></div>自己占一行而<span></span>一行可以放多个

7.1 行内元素(span/a/b/u/i/s/strong/del…)

• 一行可以显示多个，不会自动进行换行
• 默认宽度就是它本身内容的宽度
• 不可以设置宽高
• 对margin仅设置左右方向有效，上下无效；设置内边距时，只有左右方向有效（当我们设置四个方向的内边距时，对于该行内元素，确实显示出效果，但是竖直方向的内边距只有效果，对其他元素无任何影响。）
• 行内元素只能容纳文本或其他行内元素（即不能放块级元素）
  **注意：
• 链接里不能再放链接
• 特殊情况链接元素里面可以放块级元素，但是给转换一下块级元素最安全

7.2 块级元素(div/p/h系列/ul/li/form/header/nav…)

• 独占一行，即一行只显示一个，自动换行
• 宽度默认是父亲的宽度，高度默认由内容撑开
• 可以设置宽高及padding/maigin的上下左右
  注意：文字类的块级元素如<p>、<h1>~<h6>内不能使用块级元素(因为本来是用来存放文字的)，特别是不能放<div>

7.3行内块元素(input/img/textarea/button/select)

• 一行显示多个，每个之间有右下的间隙（行）
• 默认宽度就是它本身内容的宽度（行）
• 高度、行高、外边距以及内边距都可设定（块）
  img是特殊情况，虽然具有inline-block的特点，但在chrome调试工具中显示的结果是inline元素
  行内块右下间隙产生的原因：浏览器把换行和空格解析了
  如何清除间隙：
  • 如果没有文字的话，可以把font-size设为0
  • 把多个行内块元素代码在一行写
  • 设置对齐方式vertical-align，除了基线对齐baseline，设置其他的属性值（top/middle/bottom）都可解决

7.4 元素显示模式转换

• display:inline;
• display:block;
• display:inline-block;

7.5 HTML嵌套规范注意点

1. 块级元素可以嵌套任意显示模式的元素，但p标签和h1-6不要嵌套其他块级元素。
2. 行内元素只能嵌套行内元素，但a标签是特殊的行内元素，可以嵌套任意显示模式的元素，除了a标签本身；li标签内可包含div标签。

8. css三大特性

8.1 继承性

1. 常见的可继承的属性
   • text文本系列相关，如text-indent、text-align
   • font字体系列相关，如font-family、font-weight
   • line-height
   • 元素可见性visibility
   • 光标属性cursor
   • 表格属性list-style
     …
2. 继承失效的特殊情况
   • a标签的color会继承失效(因为a标签有默认样式覆盖了继承的！)
   • h系列标签的font-size会继承失效(因为h系列标签有默认大小覆盖了继承的！)
   • div的高度不能继承，但是宽度有类似于继承的效果(div是块级元素，高度默认是内容的大小！)

8.2 层叠性

样式冲突会覆盖前一个，即最后写的生效
注意：只有当选择器优先级相同是，层叠性才生效，否则样式按照优先级生效

8.3 优先级

当同一个元素指定多个选择器，就会有优先级的产生

• 选择器具有优先级
• 继承、通配符(0,0,0,0) < 标签(0,0,1,0) < 伪类、属性、类(0,0,1,0) < id(0,1,0,0) < 行内(1,0,0,0) < !important(无穷大)
• 注意点：
  • !important 不能提高继承的优先级
  • 权重叠加每一级不产生进位
  • a链接标签是浏览器默认指定了一个样式：蓝色，有下划线；所以给a的父亲指定样式无法改变a
• 计算权重步骤：
  1. 先判断选择器是否能直接选中标签，如果不能，则是继承
  2. 通过权重计算公式判断
     正常优先级相同则按层叠性，但全是继承优先级相同的情况特殊：看从谁身上继承，重新判断父标签的样式

9. 快速格式化代码及emment语法

• shift + alt + f
  设置–搜索emment.include–setting.json下的用户中添加

"editor.formatOnType":true,
"editor.formatOnSave":true,

• emment语法
  • 标签名 + tab 生成标签
  • 标签名*n 生成n个标签
  • 父>子 父子级的标签
  • 兄+弟 兄弟级的标签
  • .类名 #id
  • tag{内容}
  • ul>li*3
    (待补充…)