CSS第一节

打码的张同学

已于 2022-06-04 09:44:56 修改

阅读量94

点赞数

分类专栏： CSS学习笔记文章标签： css css3 html

于 2022-06-01 08:27:48 首次发布

本文链接：https://blog.csdn.net/m0_70849322/article/details/125076941

版权

CSS学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

`CSS`第一节

1. 简介

语法规范：

CSS规则由两个部分组成：选择器和一条或多条声明

代码风格：

展开式
选择器，属性名，属性关键字全部小写（除特殊情况
空格规范

2. 基础选择器

选择器可以根据不同需求把标签选择出来。

主要分为基础选择器和复合选择器两种。

基础选择器由单个选择器组成，包括：

标签选择器；类选择器；id选择器；通配符选择器。

2.1 标签选择器

直接用html标签名作为选择器，按标签名称分类，为页面某一类标签制定统一的css样式.

标签名 {
    属性1： 属性值1；
    属性2： 属性值2；
    属性3： 属性值3；
}

2.2 类选择器

使用class属性来调用class类，样式点定义，结构类调用，一个或多个，开发最常用。

.red {
    color: red;
}
.font-size {
    font-size: 35px;
}

<p class="red">
    文字1
</p>
<p class="red font-size">
    文字2
</p>

命名有意义空格有距离 -连接单词不要用纯数字或中文

2.3 `id`选择器

#id名 {
    属性1: 属性值1;
    ...
}

<p id="id名">
    内容
</p>

id选择器可以为标有特定id的HTML元素指定特定的样式

2.2与2.3最大区别为类选择器可以调用多次，而id选择器仅可调用一次

2.4 通配符选择器

* {
    属性1： 属性值1；
    ...
}

用*定义通配符选择器，选取页面中的所有标签。不需要进行调用。

2.5 基础选择器总结与对比

基础选择器	作用	特点	使用情况	用法
标签选择器	选中所有相同标签	不能差异化选择	较多	`p{color:red;}`
类选择器	选出一个或多个标签	可以根据需求选择	较多	`.nav {color: red;}`
id 选择器	一次只能选出一个标签	一个 id 属性在页面中只能出现一次	一般配合 js 使用	`#nav {color: red;}`
通配符选择器	选择所有标签元素	选择的太多，有部分不需要	特殊情况使用	`* {color: red; }`

3`css`字体属性

CSS 使用 font-style 属性设置文本风格。

p { font-style: italic; }

属性值	描述
normal	正常显示
italic	斜体

注意：平常很少给字体加斜体，而是给斜体标签（em,i）给位不倾斜字体。

css用font-weight属性设置字体的粗细

p {
    font-weight:700;
}

属性值	描述
normal	默认值
bold	定义粗体
100-900	400 等价于 normal，700 等价于 bold，无单位

css用font-size属性定义字体大小。

body {
    font-size: 16px;
}

px是网页常用的一种单位，可给body指定整个页面文字的大小

css用font-family属性定义文本字体。

body {
    font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif;
}

多单词用'',定义多个字体从左到右适配。

字体属性复合写法

严格遵守顺序，且 font-size 和 font-family 必须有。

是否为斜体字体粗细字体大小和高度字体类型

body {
  font: font-style font-weight font-size/line-hight font-family;
  font:20px 'Microsoft YaHei';
  font:italic 20px/36px 'Microsoft YaHei';
}

字体属性总结

字体属性	表示	注意
font-style	字体样式	italic，normal，常用 normal
font-weight	字体粗细	400=normal，700=bold
font-size	字号	单位是 `px`
font-family	字体	按照团队约定来写
font	属性连写	顺序不能变，字体和字号属性必须有

4. `css`文本属性

color属性定义颜色

div{
    color: red;
}

表示颜色	属性值
预定义的颜色值	red,green,pink
十六进制	#FF0000，#FF6600
RGB 代码	rgb(255,0,0)

RGB:red green blue,一般用取色器取。

text-align 属性用于设置元素文本内容的对齐方式。

div{
    text-align: center;
}

属性值	解释
left	左对齐（默认）
right	右对齐
center	居中对齐

text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

div{
    text-decoration: none;
}

属性值	描述
none	默认，无装饰（最常用）
underline	下划线，a 标签自带（常用）
overline	上划线。（几乎不用）
line-through	删除线。（不常用）

text-indent定义段落首行缩进。

div {
    text-indent:5px;
}

可正可负，单位有px和em两种，px是绝对大小，em是相对大小。通常中文段首缩进两个字符用2em.

line-height 设置行间的距离，行间距=文本高度+上间距+下间距,文本高度一般是16px;

p {
    line-height:26px;
}

属性	表示	注意
color	文本颜色	通常十六进制缩写，用取色器进行取色不用记颜色。
text-align	文本对齐	center ,right
text-indent	文本缩进	记住中文`text-indent: 2em;`
text-decoration	文本装饰	none underline
line-height	行高	单位`px`

5. `css`引用方式

根据书写位置不同，分为三大类：

行内样式表（行内式）；内部样式表（嵌入式）；外部样式表（链接式）

5.1 内部样式表

将 CSS 代码写在 HTML 页面内部，单独放在一个 <style> 标签中。

<style> 理论上可以放在 HTML 文档中任何一个地方，一般放在 <head> 标签中。
方便控制整个页面中的元素样式。

练习时使用，实际开发不用。

5.2 行内样式表

行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式，适合修改简单样式。

<div style="color: red; font-size: 12px">行内样式表</div>

设置当前标签样式
书写繁琐，不推荐大量使用。

5.3 外部样式表

实际开发中都是外部样式表，适用于样式比较多的情况。

新建一个后缀为xxx.css的样式文件在其中不用写style标签直接写css语句。
在html页面</head>前引入以下语句

<link rel="stylesheet" href="css文件路径" />

CSS第一节

CSS第一节

1. 简介

2. 基础选择器

2.1 标签选择器

2.2 类选择器

2.3 id选择器

2.4 通配符选择器

2.5 基础选择器总结与对比

3css字体属性

字体属性总结

4. css文本属性

5. css引用方式

5.1 内部样式表

5.2 行内样式表

5.3 外部样式表

`CSS`第一节

2.3 `id`选择器

3`css`字体属性

4. `css`文本属性

5. `css`引用方式