当前位置：首页 > news >正文

【CSS学习笔记1】css基础知识介绍

news 来源：原创 2025/5/24 6:39:04

1.css简介

1.1css语法规范

选择器（给谁，比如标题：h、段落p、表格table）+声明样式

css写在<head></head>中用<style></style>包含

<head><style>/* 选择器 {样式}*//*给谁改样式{改成什么样的}  *//*属性：xx；  */p {color: rgb(141, 86, 86);font-size: 20px; /* 字体大小px是像素的意思 */font-weight: bold;}</style>
</head>

1.2css代码风格

展开式风格、样式小写、属性冒号之后加空格、选择器和{之间加空格

2.CSS基础选择器

2.1选择器作用

选择标签

2.2选择器分类

基础选择器-由单个选择器组成：标签选择器、类选择器、id选择器、统配符选择器

符合选择器：

2.3标签选择器

标签名作为选择器div、p

某一类标签设置为统一样式

2.4类选择器

差异化选择不同的标签

在标签中要用class属性来调用class类

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=<device-width>, initial-scale=1.0"><title>Document</title><style>/* 类选择器：样式 点定义  结构类调用 一个或多个 开发最常用*/.red {color: red;}.blue {color: blue;}</style>
</head>
<body><ul><li class='red'>北京</li><li class="blue">上海</li><li>广州</li><li>深圳</li></ul>
</body>
</html>

"."后面紧跟类名，是我们自己命名的叫什么都行（这里的red），但是不能选择标签名如p、ul等等

不可使用纯数字、中文等命名且命名要有意义

用类选择器画盒子

给div着色

多类名

给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签

多个类名用空格隔开

可以吧一些标签元素相同的样式放到一个类中、浙西而标签都可以调用公用的鳄梨，然后再调用自己独有的类

节省css代码统一修改比较方便

比如：一个人有多个名字用空格分开

<!-- <div class=“red font35">刘德华 </div>包含两个类名 -->

2.5id选择器

id选择器可以为便有特定id的html元素指定待定的样式

html元素以id属性来设置id选择器，css中id选择器以“#”来定义

#id名{属性1：属性值1；...
}
#nav {color:red;}

与类选择器的区别是：只能调用一次别的不能用

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

1）类选择器可以有多个也可以被别人使用

2）id选择器是唯一的不得重复

3）id选择器和类选择器最大的不同在于使用次数上

4）类选择器在i需改样式中用的最多、id选择器一般用于唯一性元素上，经常与javascript搭配使用

2.6通配符选择器

用“*”，选择所有的样式

2.7总结

3.CSS字体属性

使用font-family属性定义文本的字体样式

p {font-family:"微软雅黑";}
div {font-family:rial,"Microsoft YaHei";}

font-family后如果跟多个字体，会先默认使用第一个依次逐个尝试

3.2字体大小

font-size:20px

标题的文字大小要单独使用

3.3字体粗细

font-weight

eg：加粗bold/700 通常用数字

单词不好记

可以修改标题（默认加粗）为不加粗格式

3.4文字样式

font-style

可以让倾斜的字体（如em）不倾斜

3.5复合属性

div {font-family: 'Courier New', Courier, monospace;font-size: 20px;font-weight: 700;font-style: italic; }

可以综合简写,先后顺序不可以颠倒 节约代码除了字体大小和字体样式之外其他的均可以省略

div {/* 复合属性 简写的方式 *//* font:font-style  font_weight font_size/line_height folnt_family */font: italic 700 20px/2 'Courier New', Courier, monospace; }