小白前端05-CSS引入/选择器/元素显示

作者: OohMuYi | 来源:发表于2019-12-22 12:01 被阅读0次

1.什么是CSS

概念：CSS（Cascading Style Sheets）,称为CSS样式表或层叠样式表。
作用：主要是设置HTML页面的布局和外观显示样式。
样式规则：
- 选择器用于指定CSS样式的HTML标签，花括号内是对该标签设置的具体样式
- 属性与属性值以“键值对”的形式出现，用:表示
- 多个“键值对”用;表示
  选择器{属性1：属性值1; 属性2:属性值2;... ...}

2.引入CSS样式表

2.1 行内式（内联样式）

概念：通过标签的style属性来设置元素的样式。
语法：
- style就是标签的属性
- 样式属性和值之间用:
- 样式多组属性值之间用;隔开
- 只能控制当前的标签，造成代码冗余，且没有实现样式和结构的分离

<标签名 style="属性1:属性值1; 属性2:属性值2; ...">内容</标签名>

例如：

<div style="color: red; font-size: 12px;">你好，世界</div>

2.2 内部样式表（内嵌样式表）

概念：将CSS代码集中在HTML文档中的head头部标签中，并用style标签定义。
语法：
- 在HTML5中的"text/css"可以省略
- style标签一般位于head标签中，理论上其他位置也可以放
- 只能控制当前页面，没有彻底的将样式和结构分离

<head>
  <style type="text/css">
    选择器{
        属性1：属性值1；
        属性2：属性值2；
        ... ...
     }
  </style>
</head>

例如：

<style>
  div{
    color: red;
    font-size: 16px;            
      }
</style>

2.3 外部样式表（外链式）

概念：将所有的样式放在一个或多个以.CSS为拓展名的外部样式表文件中，再通过link标签将外部样式表链接到HTML文件中。
语法：
- link是单标签
- link标签要放在head头部标签中，且指定link标签的三个属性

<head>
  <link rel="stylesheet" type="text/css" href="CSS文件路径">
</head>

属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里指定为`"stylesheet"`，表示被链接的文档是一个样式表文件。
type	定义所链接文档的类型，在此指定为`"text/css"`，表示链接的外部文件为CSS样式表，可以省略。
href	定义所链接外部样式表文件的URL

代码规范：
1.样式表使用展开式，不要把属性写在同一行内；
2.使用小写字母来表示选择器、属性、属性值。

3.CSS基础选择器

3.1 CSS选择器作用

找到特定的HTML页面元素（HTML标签）
CSS选择器分为 基础选择器 和 复合选择器。

3.2 CSS基础选择器

3.2.1 标签选择器（元素选择器）

概念：指用HTML标签作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
作用：将某一类标签全部选择出来，如所有的div标签。
- 优点：快速为页面同类型的标签统一样式
- 缺点：不能设计差异化样式。
语法：标签名{属性1:属性值1; 属性2:属性值2; ... ...}

3.2.2 类选择器

概念：使用.进行标识，后面紧跟类名。
- 类名自定义时，不要是纯数字或中文命名，尽量使用英文字母表示。
- 在一个标签内，只能有一个class标签。
作用：为元素对象定义单独或相同的样式，可以选择一个或者多个标签。

语法：

 /* 类名选择器 */
.类名{
  属性1:属性值1;   
  属性2:属性值2;  
  ... ...
}

<!-- 标签  -->
<p class="类名"> </p>

类选择器特殊用法-多类名
- 作用：给标签指定多个类名，从而达到更多的选择目的。
- 语法：<标签名 class="类名1 类名2 ...">
- 类名和类名之间用空格隔开。

3.2.3 id选择器

概念：用#进行标识，后面紧跟id名。
- 元素的id值相当于身份证号，是唯一的的。
作用：针对文档中某一个具体的元素进行设置

语法：

/*  id选择器 */
#id名{
 属性1:属性值1;   
 属性2:属性值2;  
  ... ...
}
<!--  标签  -->
<标签名 id="id名"> </标签名>

类选择器和id选择器的区别：
1.类名相当于人的姓名，在同一页面内是可以重复的； id名相当于人的身份证号码，是单独的，不能重复的。
2.类选择器在修改样式中，使用最多；id选择器经常和JS搭配使用。

3.2.4 通配符选择器

概念：用*表示，*就是所有的，能匹配页面中所有的元素。
作用：对全局页面进行整体设置
- 匹配所有元素，会降低页面响应速度，不能随便使用。
语法：*{属性1:属性值1; 属性2:属性值2; ...}

3.3 CSS基础选择器总结

选择器	作用	缺点	情况	用法
标签选择器	所有相同的标签	不能差异化	较多	p{color:red;}
类选择器	1个或多个	根据需求使用	非常多	.nav{color:red;}
id选择器	一次只能选择一个标签	不能差异化	只能用一次	#nav{color:red;}
通配符选择器	所有的标签	选择的太多	不推荐使用	*{color:red;}

团队约定：

尽量少使用通配符选择器*
少用id选择器#
不使用无具体语义定义的标签选择器,如div span。

4.CSS复合选择器

4.1 什么是复合选择器

概念：复合选择器是建立在基础选择器之上的，对基础选择器进行组合形成的，
常用分类：后代选择器、子选择器、并集选择器、伪类选择器。

4.2 后代选择器

概念：后代选择器又称包含选择器，可以选择父元素里面的子元素。
语法：把外层标签写在前面，内层标签写在后面，中间用空格分隔。
元素1 元素2 ... { 样式声明 }

注意：元素2是元素1的后代即可，可以是儿子，也可是孙子等。
选择器可以是任意的基础选择器。

4.3 子选择器

概念：只能选择某元素的最近一级的子元素，即选亲儿子元素。
语法：元素和元素之间用>分隔
元素1 > 元素2 > ... { 样式声明 }

注意：是最近一级的，不是最近一个。

4.4 并集选择器

概念：可以选择多组标签，同时为它们定义相同的样式。通常用于集体声明。
语法：元素与元素之间用,隔开
元素1,元素2,...{ 样式说明 }如div,p,.nav>li{color:pink;}
规范：
1.并集选择器习惯竖着写
2.最后一个选择器，不需要加,

4.5 伪类选择器

概念：用于向某些选择器添加特殊效果（链接添加特殊效果），或选择第1个，第n个元素。
语法：用冒号:来表示，如:hover、:first-child

4.5.1 链接伪类选择器

语法：
- a:link：选择所有未被访问的链接
- a:visited：选择所有已被访问的链接
- a:hover：选择鼠标指针位于其上的链接
- a:active：选择活动链接（鼠标按下未弹起的链接）
注意：
1.为确保链接伪类选择器生效，按照LVHA的顺序来声明：:link、:visited、:hover、:active。
2.因为a链接在浏览器中具有默认样式，所以要对链接进行单独指定样式。
3.实际开发的写法：
```
/* a是标签选择器 先给所有的链接设置 */
a {
  color: red;
  text-decoration: none;
    }
/* :hover是链接伪类选择器 再单独设置 */
a:hover {
  color: green;
  text-decoration: underline;
  }
···
```

4.5.2 :focus伪类选择器

作用：用于获取焦点的表单元素。
焦点即光标，一般情况下<input>类表单元素才能获取，所以这个选择器主要是针对表单元素的。

语法：

input:focus{
  background-color: pink;
      color:red
}

注意：并不是只能是input，也可以是类选择器:focus{}。

4.6 复合选择器总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	选择后代元素	可以是子孙后代	较多	空格 `.nav a`
子选择器	选择最近一级元素	只能是亲儿子	较少	> `.nav>p`
并集选择器	选择相同样式的标签	用于集体声明	较多	, `.nav,.header`
链接伪类选择器	选择不同状态的链接	和链接相关	较多	重点记住`a{} a:hover{}` 实际开发
:focus伪类选择器	选择获取光标的表单	和表单相关	较少	`input:focus`

5.元素显示

5.1 什么是元素显示模式

概念：元素显示模式就是元素（标签）以什么方式进行显示，如<div>独占一行，<span>一行可以放很多。
作用：为了更好的布局网页。
分类：块元素和行内元素。

5.2 块元素

常见元素：<h1>~<h6>、<div>、<p>、<ul>等，<div>标签是典型的块元素。
特点：
1.独占一行
2.高度、宽度、外边距和内边距都可以控制
3.宽度默认是容器（父级宽度）的100%
4.是一个容器及盒子，可以在里面放行内或者块级元素

注意：文字类的元素不能使用块级元素。如<p> <h1>~<h6>，里面不能放其他块级元素。

5.3 行内元素

常见元素：<span>、<a>、<em>等，<span>是典型的行内元素。
特点：
1.相邻行内元素在一行上可以显示多个
2.高、宽无法直接设置
3.默认宽度就是它内容的宽度
4.行内元素只能容纳文本或其他行内元素

注意：链接内不能再放链接。

5.4 行内块级元素

常见元素：<img /> <input /> <td>，它们同时具有块级元素和行内元素的特点。
特点：
1.可以和相邻行内块元素在一行上，但是之间会有空白缝隙
2.默认宽度就是它本身内容的宽度（行内元素的特点）
3.高度、宽度、内边距和外边距都可以控制（块级元素的特点）

5.5 元素显示模式总结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽高、内外边距	容器的100%	任何元素
行内元素	一行可以放多个行内元素	不能直接设置宽高、内外边距	内容的宽度	容纳文本或其他行内元素
行内块级元素	一行可放多个行内块级元素	可以设置宽高、内外边距	内容的宽度

5.6 元素显示模式转换

概念：一个模式的元素需要另一种模式的特性
语法：
- 转换为块元素：display:block;
- 转换为行内元素：display:inline;
- 转换为行内块级元素：display:inline-block;

小白前端05-CSS引入/选择器/元素显示

1.什么是CSS

2.引入CSS样式表

2.1 行内式（内联样式）

2.2 内部样式表（内嵌样式表）

2.3 外部样式表（外链式）

3.CSS基础选择器

3.1 CSS选择器作用

3.2 CSS基础选择器

3.2.1 标签选择器（元素选择器）

3.2.2 类选择器

3.2.3 id选择器

3.2.4 通配符选择器

3.3 CSS基础选择器总结

4.CSS复合选择器

4.1 什么是复合选择器

4.2 后代选择器

4.3 子选择器

4.4 并集选择器

4.5 伪类选择器

4.5.1 链接伪类选择器

4.5.2 :focus伪类选择器

4.6 复合选择器总结

5.元素显示

5.1 什么是元素显示模式

5.2 块元素

5.3 行内元素

5.4 行内块级元素

5.5 元素显示模式总结

5.6 元素显示模式转换

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端基础