基础课-前端CSS

合集 - 基础课-JS(3)

1.基础课-前端JS2023-11-08

2.基础课-前端CSS2023-11-07

3.基础课-前端HTML2023-11-06

收起

CSS基础语法

CSS的作用：让前端界面美化

CSS代码的编写位置：1.嵌入编写：CSS代码可以嵌入中HTML一个特殊标记style里，style标记必须是head的子标记

                                     2.外部编写：CSS代码单独编写在后缀是.css文件中，如果某个HTML需要使用CSS代码文件中的样式，就需要使用link标记引入CSS文件，link标记必须是head的子标记

外部编写使用较多

CSS语法：

1.嵌入编写语法：选择器选择到需要样式控制的标记

<title>Document</title>下开始写

①.标记选择器

<style>

选择器{

具体样式属性设置：

属性名：空格 属性值；

......

}

</style>

②.类选择器

<style>

．名字{

属性名：空格 属性值；

}

</style>

嵌入编写选择器分类：

1.标记选择器：名字就是某一种标记的名字，它可以一次选择多个相同类型的标记

2.类选择器：名字前必须加．，名字自定义不能数字开头，它可以一次选择多个不同类型的标记

如果某个标记被类选择器选择到，那么这个标记必须设置class属性（在尖括号标记中后加空格加class，双引号内写名字）

类选择器使用较多

2.外部编写语法

首先创建一个.css文件，文件中用类选择器进行编写，其次在.html文件中head子标记中tittle下用link:css标记（<link rel="stylesheet" href="">），将href中双引号内容改为需要跳转的.css文件的地址（例如：./CSS外部编写.css）；body标记中写需要改变的标记（注意要加class="类选择器的名字"，例如：<h2 class="XXL">HFR</h2>）

CSS常用样式

1.字体相关

font-family--字体类型

font-size--字体大小（“xx”px）

font-style--字体风格（italic-斜体）

font-wieght--字体粗细  数字取值：100 ... 400...900，400为正常，大于400加粗，小于400变细 

                                     字母取值  bold-700  bolder-800  light-300  lighter-200

2.文本样式

text-align--文本对齐方式（left、center、right）只有块标记能使用

text-decoration--文本装饰（underline-下划线、line-through0-贯穿线、overline-上划线）

color--文本颜色（单词或六位的16进制色号  #ABC123）

line-height--行高（行中文本内容垂直方向上永远居中）

3.

background-color--背景颜色

4.尺寸样式

width--宽度

height--高度

块标记默认宽度占满一行，默认高度由实际内容决定

行标记默认宽度和高度都由实际内容决定（行标记：span）

块标记可以设置width和height改变自身尺寸

行标记可以写width和height改变尺寸，但不会生效