css的基础认识

1. css的引入方式

1. 内嵌式：将css的内容写在style标签中

1. style标签虽然可以写在页面中，但是通常约定写在head标签中

1. 关系：样式表

b.外联式 css写在单独的css的文件中

需要通过link标签在网页中引入

c.行内式：css写在style属性中

正常不使用，配合js使用

引入方式	书写位置	作用范围	使用场景
内嵌式	css写在style标签中	单前页面	小案例
外联式	css写在单独的文件中，通过link标签引入	多个页面	项目中
行内式	css写在标签style属性中	当前标签	配合js使用

2.基础选择器

1. 标签选择器

通过标签名，找到页面中所有这类标签，设置样式

结构：标签名{css属性名：属性值；}

注意：

1. 标签选择器选择的是一类标签，而不是单独的某一个标签

2. 标签选择器无论嵌套关系有多深，都能找到对应的标签

2. 类选择器

结构：.类名{css属性名：属性值；}

作用：通过类名，找到页面中所有带这个类名的标签，设置样式

注意点：

1. 所有标签上都有class属性，class属性的属性值称为类名（类似于名字）

2. 类名可以由数字，字母，下划线，中划线组成，但是不能以数字或者中划线开头

3. 应该标签可以同时有多个类名，类名之间以空格隔开

4. 类名可以重复，一个类选择器可以同时有多个标签

3. id选择器

结构：#id属性值{css属性名：属性值；}

作用：通过id属性值，找到页面中带有id属性值的标签，设置样式

注意：

1. id选择器所有标签都有id属性

2. id属性值类似于身份证号码，在页面中是唯一的，不可重复的！

3. 一个标签只能有一个id属性值

4. 一个id选择器只能选择一个标签

4. 通配符选择器

结构：*{css属性名：属性值；}

作用：在页面中找到所有标签，设置样式

注意：

1. 开发中使用极少，只有在特殊情况下才能使用到

2. 在基础的小页面中可能使用到去除默认样式的标签margin和padding

字体和文本样式

• 字体样式：

1. 字体大小：font-size

取值：数字+px

注意点：谷歌浏览器默认的字体大小时16px

单位需要自己设置，否则无效

2. 字体粗细：font-weight

1. 属性名：font-weight

2. 取值

1. 关键字 正常：normal 加粗 bold

2. 纯数字 100-900 （浏览器中）正常400 加粗700

注意点：不是所有文字都提供九钟粗细，因此部分取值页面无法显示

实际开发中，正常，加粗两种使用最多

3. 字体样式：font-stly

属性名：font-style

取值：正常（默认值）normal，倾斜 italic

1. 字体类型：font属性值连写

1. 属性名：font-family

2. 常见取值：具体字体

1. 具体字体，具体系列

注意点：如果字体名称中存在多个单词，推荐使用引号包裹

最后一项字体系列，不需要引号包裹

网页开发时，尽量使用系统常见的自带字体，保证不同用户浏览网页时正确显示

font（复合属性）：

注意点：当我们要使用多个字体样式，可以连写（属性名：属性值 属性值 属性值）

可以单独写；属性名：属性值；属性名：属性值；

样式默认会显示下面的（两个样式同时设置，会默认显示下方的样式）

文本样式：

• 1.文本缩进：text-indent

• 属性名：tetx-inden

• 取值：数字px 数字：em（推荐1em=当前标签font-size的大小）

（浏览器中，使用px 需要为1：2；推荐使用em，一个缩进为1em）

• 2.文本水平对齐：text-aligh

• 属性名：text-align（可以使文本，span标签，a标签，input标签，img标签居中）

• 取值：

属性值：left   左对齐
        right  右对齐
        center 居中属性
如果需要文本居中，text-align属性给文本所在标签的父元素中使用

• 3.文本修饰：text-decoration

• 取值方式：

underline：下划线，line-through：删除线，

overline：上划线，none：无装饰性（超链接使用的较多）

开发中会使用超链接text-decoration：none；清楚a标签默认的下划线

• 4.line-height行高

• 控制一行的上下行间距，属性名：line-height

• 取值：

• 数字+px；倍数（当前标签font-size的倍数）

应用：

2. 让单行文字垂直居中可以设置line-height：文字父元素高度

3. 网页精准布局时会设置,line-height:1,取消上下间距

4. 行高与font连写的注意点：如果同时设置行高和font，注意覆盖问题

样式的层叠性：

颜色常见取值样式：

文字颜色：color ；背景颜色：background-color

属性值：

Rgb表示法：agb（0，0，0）

Raga表示法：rgba（0，0,0）

十六进制表示（常用）：#00000

标签水平居中的方法：margin：0 auto

注意：

1. 如果让div，p，h（大盒子）水平居中，直接给当前亿速本身设置即可

2. Margin：0 auto，一般针对固定宽度的盒子，如果让大盒子没有设置宽度，此时会默认占满父元素的宽度

3.选择器进阶

• 目标：能够理解复合选择器的规则，并使用符合选择器在htm中选择元素

1. 复合选择器

2. 并集选择器

3. 交集选择器

4. hover伪类选择器

5. Emment语法

1. 后代选择器

1. 作用：根据html标签的嵌套关系，选择父元素后代中满足的条件

2. 语法：选择器1 选择器2{css}

3. 在选择器1所找到后代（儿子，孙子，，，），找到满足选择器2的标签，设置样式

4. 注意点：

1. 后代包括：儿子，孙子等

2. 后代选择器中，选择器与选择器之间通过空格隔开

    

        
你好
    

2.子代选择器

1. 作用：根据htm标签的嵌套关系，选择父元素子代中满足的条件

2. 语法：选择器1>选择器2{css}

3. 在选择器1所在的标签中找到子代，满足选择器2的标签。设置样式

4. 注意：

1. 子代只包括;儿子

2. 子代选择器中，选择器与选择器之间通过>隔开

2. 并集选择器

1. 作用：同时选择多组选择器，设置相同的样式

2. 语法：选择器1，选择器2{ css}

3. 找到选择器1和选择器2选中的标签，设置样式

4. 注意：

1. 并集选择器中没组选择器之间通过“，”逗号分隔

2. 并集选择器的没组选择器可以是基础选择器或者复合选择器

3. 并集选择器的没组选择器通常一行写一行，提高代码的可读性

3. 交集选择器：紧挨着

1. 作用：选中页面中同时满足多个选择器的标签

2. 选择器语法:选择器1 选择器2{css}

3. 结果

1. 找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式

4. 注意点：

1. 交集选择器中的选择器之间是紧挨着的，没有当下分割开

2. 交集选择器中如果没有标签选择器，标签选择器必须写在最前面

style{
p.box{
    color:red;}
}

 这是p标签

4. hover伪类选择器

1. 作用：选中鼠标悬停在元素上的转态，设置样式

2. 语法：选择器hover{css}

3. 注意点：

1. 伪类选择器的元素的某种转态

hover是用来实现划过效果的，非常常用。伪类 :主要是为了元素添加一些效果;这些必须通过鼠标 的事件行为才能触发 伪类:四个===经常应用超链接a标签 上面,其中第124只能用在超链接a上，3没有限制 :link======鼠标访问前的样式 :visited===鼠标访问后的样式 :hover=====鼠标悬停时的样式 :active====鼠标激活瞬间样式,鼠标点击时 冒号前后没有任何的空格符号 注意事项:应用在超链接上面的时候:四个必须遵循以上顺序,不能更改,更改之后实现不了效果 注意实现:开发的时候使用频率最高的就是:hover，实现鼠标悬停的效果;背景颜色改变,文本颜色改 变。 二，扩展 1.伪类选择器:link、hover、active、visited 2.伪对象选择器:after、before、fist-letter/line 3.关于之间的区别 - 写法上的区别:在css2中伪类和伪对象都是一个冒号,在css3中规定伪对象需要使用两个冒号 - 作用上的区别:伪类可以改变元素的状态,伪对象可以添加结构(虚拟的)

5. emmet语法：

1. 作用：通过语法快速生成代码，简写

记忆	示列	效果
标签名	div
类选择器	.red
id选择器	#one
交集选择器	p.red#one
子代选择器	ul>li
内部文件	ul>li 我是内容	我是内容
创建多个	ul>li*3

4.背景相关属性

1. 背景颜色

1. 属性名：background-color（bgc）

2. 属性值：

1. 颜色取值：关键字，rgb元素表示法，rgba表示法，十六进制

3. 注意点

1. 背景颜色默认是透明：rgba（0,0,0,0）transparent

2. 背景颜色不会影响大小，并且还能看清楚盒子大小位置，一般会在布局习惯先给盒子设置背景颜色

2. 背景图片

1. 属性名：background-image（bgi）

2. 属性值：background-image：url（“图片的位置”）

3. 注意点：

1. 背景图片中url可以省略引号

2. 背景图片默认是在水平和垂直方向平铺的

3. 背景图片仅仅是在指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

3. 背景平铺

1. 属性名：background-repeat（bgr）

2. 属性值：

取值	效果
repeat	（默认值）水平和垂直方向都有平铺
no-repeat	不平铺
repeat-x	沿着水平方向x轴平铺
repeat-y	沿着垂直方向y轴平铺

4. 背景位置

1. 属性名：background-position（bgp）

2. 属性值：background-position：水平方向位置 垂直方向位置

1. 方位名词（最多只能表示9个位置）

1. 水平方向：left center right

2. 垂直方向：top，center，botton

数字+px（坐标）：

原点（0,0）盒子的左上角

x轴：水平向右，y轴，垂直向下

操作，将图片左上角与坐标点重合即可

注意点：

方位名词取值和坐标取值可以混合使用，第一个取值表示水平，第二个取值表示垂直

5. 背景相关连写属性

属性名:background(bg

属性值:单个属性值的合写，取值之间以空格隔开

书写顺序:

推荐:background:color imagerepeat position

不分先后顺序背景色，背景图，背景平铺，背景位置（）

省略问题:

1. 可以按照需求省略

特殊情况:在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background:url()

注意点

如果需要设置单独的样式和连写

①要么把单独的样式写在连写的下面

②要么把单独的样式写在连写的里面

 
    
（拓展）img标签和背景图片的区别
 
    
   
 
    
需求：需要在页面中展示一张图片效果？
 
   
 
   
 
    
方法一：直接写上img标签设置即可
 
   
 
   
 
    
img标签是一个标签，不设置宽高默认会以原来的尺寸显示
 
   
 
   
 
    
方法二：div标签+背景图片
 
   
 
   
 
    
需要设置div的宽高，因为背景图片只是装饰的css样式，不能撑开div标签
 
   
 
   
5.元素显示模式
 
   
 
    
块级元素（block）
 
   
 
   
 定义：默认情况下，独占一行的元素就是块级元素。
 
   
 
    
显示特点：
 
   
 
   
 
    
独占一行（一行只能显示一个）
 
   
 
   
 
    
宽度默认是父元素的宽度，高度默认是由内容撑开的
 
   
 
   
 
    
可以设置宽高
 
   
 
   
代表标签：
 
   
div，p，h系列，ul,li,dl,dt,dd,from,header,nav,footer
 
   
 
    
行内元素
 
   
 
   
 定义：默认情况下，一行能显示多个，并且元素的高度、宽度、行高等不能直接设置
 
   
行内元素的特点：
 
   
（1）相邻行内元素在一行上，一行可以显示多个。
 
   
（2）高、宽直接设置是无效的。
 
   
（3）默认宽度就是它本身内容的宽度。
 
   
（4）行内元素只能容纳文本或则其他行内元素。
 
   
注意：
 
   
链接里面不能再放链接。
 
   
特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。
 
   
举例子：
 
   
、、、、、、、、、等，其中标签最典型的行内元素。有的地方也成内联元素
 
   
 
    
行内块元素（内嵌块元素）
 
   
 
   
元素的高度、宽度、行高、以及顶部底部的内外边距都可以设置
 
   
 常见的行内块元素：,
 
   
 
    
显示特点：
 
   
 
   
 
    
一行可以显示多个
 
   
 
   
 
    
可以设置宽高
 
   
 
   
 
    
代表标签：
 
   
 
   
 
    
input，textarea,button,select
 
   
 
   
 
    
特殊情况：img标签由行内块元素的特点，但是谷歌调试器中显示的结果是inline
 
   
 
   
 
    
元素显示模式转换
 
   
 
   
这三种元素之间可以通过display属性相互转换，并且也可以通过浮动、定位等进行转换
 
   
元素显示模式转换display
 
   
块转行内：display:inline;
 
   
行内转块：display:block;
 
   
块、行内转换为行内块：display:inline-block
 
   
 
    
html嵌套规范
 
   
 
   
 
    
块级元素一般作为大容器，可以嵌套文本，块级元素，行内块元素等
 
   
 
   
 
    
但是p标签中不要嵌套div p h等块级元素
 
   
 
   
 
    
a标签内可以嵌套任何元素
 
   
 
   
 
    
但是：a标签不能嵌套a标签
 
   
 
   
 
   
 
    
css的特征