前端基础-css基础选择器

Posted 2021-09-06 咖啡壶子

一.css简介

html 的局限性

丑

CSS-网页美容师

让网页更漂亮

CSS 最大价值

结构和样式分离

二.CSS 语法规范

语法

两部分组成：选择器 以及 样式声明

h4 {
color: blue;
font-size: 100px;
}

CSS 代码风格

1. 样式格式书写：推荐展开式
2. 样式大小写：推荐小写
3. 空格规范：选择器后面，保留一个空格；冒号后面，保留一个空格

三.选择器的作用

是选择标签（元素）用的

h4 {
color: blue;
font-size: 100px;
}

分类

1. 基础选择器
2. 复合选择器

四.基础选择器

标签选择器

1. 语法
   标签名{
   属性1: 属性值1;
   属性2: 属性值2;
   属性3: 属性值3;
   …
   }

2. 作用：把某一类标签全部选择出来

3. 优点：快速为页面中同类型的标签统一设置样式

4. 缺点：不能为同类型标签设计差异化样式

类选择器

1. 语法
   .red {
   color: red;
   }
   <div class=“red”></div>
2. 场景:实现差异化
3. 多类名
   <div class=“red font20”>亚瑟</div>

使用场景
(1) 可以把一些标签元素相同的样式(共同的部分)放到一个类里面.
(2) 这些标签都可以调用这个公共的类,然后再调用自己独有的类.
(3) 从而节省CSS代码,统一修改也非常方便.

id 选择器

1. 用法
   #nav {
   color:red;
   }
   <div id=“nav”></div>

2. 和类选择器的区别:
   类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。
   id 选择器好比人的身份证号码，全中国是唯一的，不得重复。
   id 选择器和类选择器最大的不同在于使用次数上。
   类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 javascript 搭配使用。

通配符选择器

1. 通配符选择器
   {
   margin: 0;
   padding: 0;
   }
2. 作用:选择页面上的所有标签（元素）

五.字体属性

字体系列

语法: div {font-family: Arial,"Microsoft Yahei", "微软雅黑";} 不需要记住字体名

字体大小（字号）

1. p {
   font-size: 20px;
   }
2. 注意点:
   px（像素）大小是我们网页的最常用的单位
   谷歌浏览器默认的文字大小为16px
   我们尽量给一个明确值大小，不要默认大小
   可以给 body 指定整个页面文字的大小

字体粗细

1. 语法:
   p {
   font-weight: bold;
   }
2. 注意点:实际开发时，我们更喜欢用数字表示粗细（400-900）

字体样式

1. 语法:
   p {
   font-style: normal;
   }
2. 注意点:平时我们很少给文字加斜体，反而要给斜体标签（em，i）改为不倾斜字体。

字体复合属性

1. 语法:
   body {
   font: font-style font-weight font-size/line-height font-family; }
2. 注意点
   使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
   必须保留 font-size 和 font-family 属性

总结

CSS font (字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体）

七.文本属性

文本颜色

1. 语法
   div {
   color: red;
   }

2. 颜色值
   预定义的(开发中不常用)：red，green
   16进制：#FF0000
   RGB：rgb(225,0,0)

3. 常用的颜色
   白色：#FFFFFF
   黑色：#000000
   红色：#FF0000

文本对齐

div { text-align: center; }

文本装饰

1. 语法
   div {
   text-decoration：underline； }
2. 重点：重点记住如何添加下划线 ? 如何删除下划线 ? 其余了解即可

文本缩进

1. 语法
   p {
   text-indent: 2em;
   }
2. em
   em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小
   段落开头我们缩进2个文字：text-indent：2em

行间距（行高）

p {
line-height: 26px;
}

八.css引入方式

内部样式表（嵌入式）练习时用的

在head标签中使用style标签，style标签里面写css样式

行内样式表（行内式）

元素的style属性里面写样式

因为直接在元素上写样式，不需要写选择器了

外部样式表（链接式）

步骤：

1. 新建一个 .css 的样式文件
2. 在 HTML 页面中，使用 标签引入这个文件：

九.Chrome调试工具

打开调试工具

按下 F12 键或者右击页面空白处检查。

使用调试工具

左边是 HTML 元素结构，右边是 CSS 样式

如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误