CSS 基础-01

发表于 分类于 阅读次数：

1. css文件导入方式

css的导入方式有四种：

  • 内联式 ：在head头标签中，通过style标签书写css

    使用场景：测试调试环境

    • 格式 : 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <head>
    <style>
    	p{
            color:blue;
      		text-indent:2em;
    	}
    </style>
    </head>

  • 外链式 ：在head头标签中，通过link标签引入css文件

    • 格式：

    使用场景：正式上线

    1
    2
    3
    4
    <head>
    <link rel="stylesheet" href="./demo.css">
    </head>

  • 导入式 ：在head头标签中，通过style标签引入css文件

先加载html，再加载css，卡顿时会出现先出现原始内容的情况

1
2
3
4
<style>
	@import url('.demo.css')
</style>

注意：@import 必须写在style标签里面的最前面

​ @import 的本行最后必须加上分号；

  • 内嵌式 ：直接在开始标签中，通过style属性书写css

不推荐，优先级太高，可能打乱整体布局

1
2
<开始标签 style="属性名：属性值；属性名：属性值；"

2. css基础语法

书写格式：

1
2
3
4
5
6
选择器{
	属性名1：属性值；
	属性名2：属性值；
	属性名3：属性值；
	}

注：css属性不区分大小写

css注释：/* 注释内容 */

3. 颜色

属性名：color 字体颜色

属性值：

  • 单词 red white blue …

  • #rgb 000~fff

    ​ r,g,b 的范围：09 af

  • #rrggbb 000000~ffffff

  • rgb(0255,0255,0~255)

  • rgba(0255,0255,0255,01)

    1
    2
    3
    a:透明度，可小数


  • hsla（h,s,l,a） 色轮值

    • h：色调 0~360
    • s：饱和度 %
    • l：亮度 %
    • a：透明度 0~1

属性名：opacity 透明度

属性值：0~1 可小数

4. 长度单位

1绝对长度

​ cm 厘米

​ mm 毫米

​ in 英寸

1 in=2.54 cm=25.4 mm

2相对长度

​ px 像素

​ em 倍数

​ % 百分比

5. 基础选择器

1 html四大通用属性

style 样式

name 命名

class 类，绰号

id 身份码

2 基础选择器

- 标签选择器：

​ 格式：标签名{…}

​ 特性：匹配方位广，涉及整个body。适合做初始化

- 类选择器：

​ 格式：.class名{…}

​ 特性：一个标签可以有多个class名

​ 多个标签可以有相同的class名

- 身份选择器：

​ 格式：#id名{…}

​ 特性：一个标签只能有一个id名，多个标签原则上不能有重复id

css可以重复id，但js检查到重复id会报错

6. 选择器详解

1.关联选择器

关联选择器：也叫关系选择器

​ 设：s1,s2,s3,…为基础选择器

​ 则：

1
2
3
4
5
s1 s1{ ... }  匹配s1下的所有后辈
s1>s2{ ... }  匹配s1下的所有儿子s2
s1+s2{ ... }  匹配s1后面的一个兄弟元素s2
s1~s2{ ... }  匹配s1后面的所有兄弟

2.组合选择器

格式：s1，s2，s3，...，sn{ ... }

分别给s1, s2 和 s3等元素赋予相同的css样式

s1, s2等元素之间没有关系

3.伪类选择器

格式：s1:hover{ ... }

效果：当鼠标悬停在s1上时，触发css样式

​ 隔山打牛类：

  • s1:hover s2{}

​ 当鼠标悬停在s1上时，s1下所有后辈s2触发css样式

  • s1:hover>s2{}

    当鼠标悬浮在s1上时，s1下的所有儿子s2触发css样式

  • s1:hover+s2

    当鼠标悬浮在s1上时，s1后的一个兄弟元素s2触发css样式

  • s1:hover~s2

    当鼠标悬停在s1上时，s1后的所有兄弟元素s2触发css样式

    引申级

    • s1:first-child{...}

    找s1父级下的第一个标签，若是s1，应用css样式

    • s1:first-of-type{...}

    找到s1父级下的第一个标签，应用css样式

    • s1:last-child{...}

    找s1父级下的最后一个标签，若是s1，应用css样式

    • s1:last-of-type{...}

    找到s1父级下的最后一个标签，应用css样式

    • s1:nth-child{...}

    找s1父级下的指定顺序的标签，若是s1，应用css样式

    • s1:nth-of-type{...}

    找到s1父级下的指定顺序的标签，应用css样式

nth属性值

​ 单词：奇数（odd） 偶数（even）

​ 公式：一元一次方程（2n）（2n+1）（3n+5）

4.伪对象选择器

  • s1::before{...}在s1里面内容的最前面

  • s1::after{...} 在s1里面内容的最后面

    content 配合before，代表内容

    before和after配合将来的浮动技术做布局使用

7. 优先级

各标签权重值：

​ 标签名：1 class名：10 id名：100

优先级规则：

​ 权重值越大，优先级越高

​ 权重值相同，离标签越近的选择器，优先级越高

权重值可以叠加

最高权重：

​ 没有具体值，只是一种象征

​ 格式：属性值 !important

继承性：

​ 许多标签都可以继承祖辈的大多数属性，会有小部分属性无法继承

​ 例如：

​ a标签的颜色

​ h标签的大小

​ 。。。

组合选择器前后权重不会叠加，互不影响

8. 边框

1 border

属性名：border

属性值：方向（top bottom left right）

  • 单边： border-方向-color： 边框单边颜色

    ​ border-方向-width： 边框单边宽度

    ​ border-方向-style： 边框单边线显示（solid）或关闭（none）

    简写：border-方向：[color|width]|style

  • 四边：border-color： 边框四边颜色

    ​ border-width： 边框四边宽度

    ​ border-style： 边框四边线显示/关闭

    简写：border：[color|width]|style

注意：单边和四边属性中，style属性必须设置，简写没有先后顺序要求

2 radius

属性名：border-radius 圆角

属性值：px，%

​ border-上下-左右-radius： 单边圆角

3 collapse

属性名：border-collapse 边框合并（一般用于表格）

属性值：collapse

4 outline

属性名：outline 外轮廓

属性值：与border相同，常用none，取消外轮廓

9. 字体

属性名：font

属性值：

  • font-size： 字体大小

不同浏览器最小值不一样，竟可能不要触碰最小值

  • font-family: 字体家族

必须本地存在该字体，浏览器才可以使用

  • font-weight： 字体加粗

    属性值：加粗（bold）或 普通（normal）

  • font-style： 字体倾斜

    属性值：斜体（italic）或 普通（naomal）

  • line-height: 行高

line-height 若设置为与当前元素的高度一致，怎显示垂直居中效果（仅限一行）

简写：font：size family
font:[weight\style] size [/line-height] family;

注意：font属性至少要写 size 和 family，且 font 属性中 size 必须在family的前面

手册常用公式写法：

​ | 选择左侧或者右侧或者两者都选，前后顺序无要求

​ [ ] 中括号内部的值可写可不写