CSS知识点总结(一)定义、使用方式及常见属性

最新推荐文章于 2022-05-20 23:36:12 发布

原创最新推荐文章于 2022-05-20 23:36:12 发布 · 433 阅读

0 ·

CC 4.0 BY-SA版权

【HTML.CSS】专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了CSS的定义、三种使用方式（内嵌、嵌入、引入）以及常见属性，包括颜色、字体、背景、文本和边框属性。通过实例演示了如何设置文本颜色、字体大小、背景图片、边框样式等，帮助读者掌握CSS基本操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML<！Doctype>声明标签

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
在 HTML4.01中有三种<!DOCTYPE>声明DTD类型，分别表示严格版本、过渡版本以及基于框架的HTML文档。HTML5中只有一种
请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。

 <meta charset="utf-8">

使用CSS样式的方式：
1、内嵌样式表 <body style=""></body> 属性与属性值之间以冒号隔开，属性与属性之间以分号隔开
2、嵌入式样式表

<head>
    <style type="text/css">
    </style>
</head>

3、引入式样式表

<link rel="StyleSheet" type="text/css" href="style.css">

定义样式表
1、HTML标记定义
标签选择器 p { }
2、class定义
类选择器.text { } 并且在HTML中定义类 <p class="text"></p>
3、id定义————-唯一选择器
ID选择器 #part1 { } 并且在HTML中定义类 <p id="part1"></p>
4、伪类选择器
a：link { } //正常链接
a：hover { } //鼠标放上去样式
a：active { } //点击链接时的样式
a：visited { } //已经访问过的链接
定义链接样式时务必确认定义的顺序，link–visited–hover-active

还可以组合选择：h1，h2，h3 { }
优先级问题：ID>CLASS>HTML 同级时后出现的样式会覆盖前面样式

CSS常用属性：

一、颜色属性
color属性定义文本的颜色：
1.color：green ；（颜色对应的英文名称）
2.color：#FF0066 ；（十六进制）

分为三段，分别表示R,G,B取值
简写形式，当每个颜色的取值重复时，简写为#F06；

3.color：rgb（255,0,0）；（RGB模式）
4.color：rgba（255,0,0,1）；（RGB模式和Alpha色彩空间透明度）

Alpha取值范围0——1,1为百分百 显示

二、字体属性
1.font-size 字体大小
常见单位：
px：像素，设置固定值
%：父元素的百分比
smaller：比父元素更小
lager：比父元素更大
inherit：继承父元素

2.font-family 定义字体种类
font-family：跟多个字体，优先使用靠前的字体（以确保字体不存在的时候直接使用下一个）
例：font-family：‘微软雅黑’，‘宋体’；

3.font-weight 定义字体加粗
normal：正常（400）
bold：粗（700）
bolder：更粗
lighter：更细
也可以用值表示，范围100-900，只能是整百

4.font-style 定义字体样式
normal：标准
italic：斜体
oblique：倾斜
inherit：继承

5.font-variant 小型大写字母
normal：标准
small-caps：小型大写字母
inherit

三、背景属性
1.background-color：背景颜色
2.background-image：背景图片

eg. background-image：url（'1.jpg'）; 也可以设置none

3.background-repeat：背景是否重复铺满

 repeat         x，y都平铺
 repeat-x       x平铺
 repeat-y       y平铺
 no-repeat      不重复

4.background-position：背景位置

横向
right           居中向右边(一个值的时候，下面也是)
center          水平垂直居中
left            居中向左边
纵向
top、center、bottom
也可以两个值
right top     顶部向右

用数值表示位置
x坐标  y坐标     参数省略默认为居中

优化简写

background：背景颜色 url（图像）重复位置
eg. background：red url（’1.jpg’） no-repeat 20px;

四、文本属性
1 . text-align ：文本对齐方式
left（默认）、center、right

2 . line-height ：文本行高
基于字体大小的百分比：120%
数值，设定固定行高：100px

3 . text-indent ：首行缩进
父元素（容器）宽度的百分比： 10%
数值设定固定缩进：10px
inherit ：继承

4 . letter-spacing ：字符间距
normal ：默认
length ：具体数值如20px ，可以设置负值
inherit ：继承

5 . word-spacing ：单词（英文）间距
normal ：默认
length ：具体数值如20px ，可以设置负值
inherit ：继承

6.direction ：文本方向
ltr ：默认值从左到右
rtl ：从右到左
inherit ：继承

7 . text-transform ：文本大小写
none ：默认
capitalize ：每个单词以大写字母开头
uppercase ：字母全部大写
lowercase ：字母全部小写
inherit ：继承

五、边框属性
1 . border-style : 边框风格
none :默认无边框
solid ：直线边框
dashed ：虚线边框
dotted ：点状边框
double ：双线边框
groove ：凸槽边框
ridge
inset
outset
inherit ：继承

2 . border-width : 边框宽度
单独风格：
boder-top-width: 上边框宽度
boder-bottom-width:下边框宽度
boder-left-width:左边框宽度
boder-right-width:右边框宽度
规格属性：
thin ：细
medium ：中等
thick ：粗
px ：固定
inherit ：继承

3 . border-color : 边框颜色
单独风格：
boder-top-color ：上边框颜色
boder-bottom-color :下边框颜色
boder-left-color :左边框颜色
boder-right-color :右边框颜色

规格属性同 color
一个值：控制上下左右
两个值：控制（上下）（左右）
三个值：控制上（左右）下
四个值：控制上、下、左、右

简写方式：
border ：solid 2px #60

六、列表属性
1 . list-style-type : 标记的类型
none ：无标记
disc ：默认。标记是实心圆。
circle ：标记是空心圆。 ……有序列表和无序列表可以相互转换哦……
square ：标记是实心方块。
decimal ：标记是数字。
decimal-leading-zero ：0开头的数字标记。(01, 02, 03, 等。)
lower-roman ：小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman ：大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha ：小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha ：大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek ：小写希腊字母(alpha, beta, gamma, 等。)
lower-latin ：小写拉丁字母(a, b, c, d, e, 等。)
upper-latin ：大写拉丁字母(A, B, C, D, E, 等。)
hebrew ：传统的希伯来编号方式
armenian ：传统的亚美尼亚编号方式
georgian ：传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic ：简单的表意数字
hiragana 标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana 标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha ：标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha ：标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）