目录

1. CSS 简介

1.1 HTML 的局限性

1.2 CSS-网页的美容师 

1.3 CSS 语法规范

1.4 CSS 代码风格

1. 样式格式书写

2. 样式大小写

3. 空格规范

 2. CSS 基础选择器

2.1 CSS 选择器的作用

2.2 选择器分类

2.3 标签选择器

2.4 类选择器

2.4 类选择器-多类名 

1. 多类名使用方式

2.多类名开发中使用场景

2.5 id 选择器

id 选择器和类选择器的区别

2.6 通配符选择器

 2.7 基础选择器总结​编辑


 

1. CSS 简介

CSS 的主要使用场景,的. 

1.1 HTML 的局限性

说起 HTML,这其实

<h1> 表明这是一个大,<p> 表 明这是一个段,<img> 表明这儿有一,<a> 表示此处有链接。

很早的时候,站虽虽然 HTML 可以做简单的样繁琐……

1.2 CSS-网页的美容师 

CSS 层叠样式表 ( Cascading Style Sheets ) 的简称.

有时我们也会称之为 CSS 样式表级联样式。CSS 是也是一种标记语言

CSS 主要用于设置 HTML 页面中的文本内样式、边距等)以及

CSS 让我们的网页更CSS 可以美化 HTML , HTML 更漂亮,  让页面布局更

  总结:

1.
HTML
主要做结构
,






.
2.
CSS
美化
HTML
,
布局网页
.
3.
CSS
最大价值
:

HTML
专注去做结构





交给
CSS,

结构
(
HTML
)
与样式
(
CSS
)
相分

1.3 CSS 语法规范

使用 HTML 时,需要遵从一,CSS 也是如此。要想使用 CSS 对网页进行修CSS 样式规则。

CSS 规则由两个主要或多条声明。

选择器
是用于指定
CSS
样式的
HTML
标签
,花括号











样式
属性和属性值以









属性是对指定的





















属性和属性值之





:

分开
多个“键值对”






;




 所有的样式, <style> 标签内,表示<style> 一般写到 </head> 上方。


<head>
<style>  h4 {
            color: blue;
            font-size: 100px;
}
</style>
</head>

1.4 CSS 代码风格

以下代码书写制规,.

1. 格式书写

紧凑格式

h3 { color: deeppink;font-size: 20px;}

展开格式

h3 {

color: pink;

font-size: 20px;

}

强烈推荐第二 因为更直观。 

2. 大小写

h3 {

color: pink;

} 
H3 {

COLOR: PINK;

}

强烈推荐样式性名使外。

3. 空格规范

​​​​​​​h3 {

color: pink;

}

   值前面,保留个空格

 器(标签中间

 2. CSS 基础选择器

2.1 CSS 选择器的作用​​​​​​​

<div>我是div</div>

<div>我是div</div>

<p>我是段落</p>

<ul>

<li>我是ul里面小li哦</li>

</ul>

<ol>

<li>我是ol里面小li哦</li>

</ol>

1.我想把 div 里面的文字改?

2.我想把第一个div 里面的文字改为?

3.
我想把
ul
里面的
li
文字改为红色
?

选择器(选择符)

简单来说,就

 以上 CSS 做了两件事:

1.
找到所


h1
标签。
选择器(选对人
)。
2.
设置这些标签















)。

2.2 选择器分类

选择器分为复合择器。

基础选择器是





器组

基础选择器又





选择







id
选择器

通配符

择器

2.3 标签选择器

标签选择器 HTML 标签名称作为签指定统一 CSS 样式

语法

标签名{

属性1: 属性值1;
属性2: 属性值2;  
属性3: 属性值3;

...

}

作用

标签选择器可标签 <div> 标签和所有的 <span> 标签。

优点

能快速为页面标签式。

缺点

不能设计差异能选签。

2.4 类选择器

标签使.

类选择器在 HTML 中以 class 属性表示,在 CSS 中,类选择器“.”示。 

语法

.类名 {

属性1: 属性值1;

...

}

例如,将所 red HTML 元素均为红色。

.red {
color: red;
}

结构需要用class调用 class 类的意思

<div class=‘red’> 变红色 </div>

注意

选择器使用“.”(的)。

 可以理解为给了一示。

 长名称或词组使横线名。

使用纯命名使表示。

命名要有意义使的。

命名规范:遵循《Web 前端开发规范手册》

记忆口诀:结构

2.4 类选择器-多类名 

我们可以给一多个的。 这些类名都可以.

简单理解就是多个名字.

1. 多类名使用方式

<div class="red font20">亚瑟</div>
(1)
在标签class
属性中

多个类名
(2)
多个类名中间





分开
(3)
这个标签就可





这些



样式

2.多类名开使

(1)
可以把一些标





的样

(




分)







.
(2)















,










类.
(3)
从而节

CSS


,








便
.

<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>
各个类名中间用


隔开
简单理解:就是





















名字
这个标签就可





这些



样式
从而节省
CSS


,








便
.

     多类名选择器在后使

2.5 id 选择器

id 选择器可以为标特定 id HTML 元素指定特定式。

HTML 元素以 id 属性来设置 id 选择器,CSS id 选择器以#" 来定义。

语法

#id名 {

属性1: 属性值1;

...

}

例如,将 id nav 元素中的内容

#nav {

color:red;

}

注意:id 属性只能在每个 HTML 文档中出现一次: 样式#定义,结构id, 只能调用一次, 别人切勿使用.

id 选择器和类选择器的区别

①  类选择器(class)使用。

②  id 选择器好比人的重复。

③  id 选择器和类选择使数上。

④  类选,id般用上, JavaScript 配使用。

2.6 通配符选择器

CSS 中,通配符选使*

语法


* {

属性1: 属性值1;

...

}

通配符选择器用, 自动就给所有的使样式

特殊情况才使用使()


* {
margin: 0;
padding: 0;
}

 2.7 基础选择器总结

每个基础选择



使

场景




掌握
如果是修改样


类选择器是使用

多的