css笔记

最新推荐文章于 2026-06-22 11:06:56 发布

原创最新推荐文章于 2026-06-22 11:06:56 发布 · 218 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #css3 #jquery

css笔记

为网页添加样式

术语解释

~~~css
h1{

color:red;
background-color: lightblue;
text-align: center;
}

~~~

整条代码叫css规则
css规则 = 选择器 + 声明块

选择器

选择器：精准的选中想要的元素

选择器的分类

简单选择器

元素选择器选中页面中所有的相同的元素
id选择器选中对应id的元素

写法：在声明块之前添加# + id名
类选择器
使用：给元素添加class属性，并且给class赋值
```
class = "red"
```
在css代码的声明块之前添加 . + 类名字
```
  .red{
  corol: red;
  }
```
非常灵活：一个元素可以使用多个class选择器
```
<p class = "red big" >  
lorem
</p>
```
在元素中每个类选择器用空格隔开。
通配符选择器
*，表示选中所有元素
```
*{
  color: red;
}
```
将所有元素内的文字颜色设置为红色
属性选择器

根据属性名和属性值选中元素

伪类选择器

选中某些元素的某种状态

1）link: 超链接未访问时的状态

2）visited: 超链接访问过后的状态

3）hover: 鼠标悬停状态

4）active：激活状态，鼠标按下状态

爱恨法则：love hate

伪元素选择器

before

after

选择器的组合

并且
后代元素 —— 空格
子元素 —— >
相邻兄弟元素 —— +
后面出现的所有兄弟元素 —— ~

选择器的并列

多个选择器, 用逗号分隔

语法糖

声明块

出现在大括号中里面有很多的声明（属性）。每一个声明表达某一个声明（属性）样式。

css的书写的位置

内部样式表

书写到style中
一般书写在head中，是为了浏览器提前加载样式。
2. 内联样式表，元素样式表
直接应用到属性里面

<h1 style = "color : red; " >
</h1>

直接书写到元素的style属性中
3. 外部样式表 [推荐]
添加独立的css文件
在使用外部文件时需要在head中添加连接

<link rel="stylesheet" href="./ts.css">

1）外部样式表可以解决多页面的重复样式
2）有利于浏览器缓存，提高页面的执行效率
3）有利于代码分离，容易阅读和维护

常用的样式声明

corol: 颜色
元素内部的预设颜色
预设值 规定好的的单词
三元色色值 红绿蓝三原色组合其他颜色
颜色的表示法
rgb表示法
rgb(0, 255, 0)
hex(16进制)表示法
马尔斯绿 #008c8c
淘宝红 #ff4400
紫色:ff00ff
青色：00ffff
黄色：ffff00
灰色：cccccc
background-color
背景颜色
font-size
元素内部的文字的大小
单位：
user agent 用户代理（浏览器）
1）px(像素)
2）em(相对单位)表示，相对于父元素的大小， 2em 是父元素像素的2倍
如果父元素没有设置字体像素的大小，就会继承父元素的父元素字体的大小。
如果没有父元素，就会使用基准字号（浏览器设置的属性）
font-weight
元素内部文字的粗细程度, 可以取数字，也可以是预设值

strong 有加粗的效果 em元素有倾斜的效果 strong表示重要的不能忽略的内容 em 表示强调的内容
font-family

设置的字体只能是电脑中存在的字体，因此在开发中经常设置多个字体以匹配用户的需要。
sans-serif: 非衬线字体，字体的一个总类，表示字体的表面没有经过修饰（如果匹配不到用户的字体可以使用）-----通用的写法。
font-style
字体的样式

i元素的样式默认为倾斜的。
text-decoration
文本修饰给文本加线

a元素
del元素表示废弃/错误的内容
s元素表示过期的内容
text-indent
表示首行缩进
line-hight
表示每行文本的行高
设置文本为容器的行高，可以使单行文本垂直居中
多行文本时通常使用相对单位，而不使用绝对单位
直接设置为数字，表示相对于文本的大小
hight
文字的高度
weight
文字的宽度
letter-space
文字间的间隙
text-align
文字的水平排列方式