CSS样式

最新推荐文章于 2022-08-02 10:21:48 发布

dodobibibi

最新推荐文章于 2022-08-02 10:21:48 发布

阅读量115

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/dodobibibi/article/details/88207165

本文详细介绍了CSS的基本概念，包括层叠样式表的定义、语法、创建方式及优先级。讲解了不同选择器的使用，背景、文本、字体和链接的样式设置，以及表格的样式控制，是前端开发人员不可或缺的资源。

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

CSS

CSS指层叠样式(Cascading Style Sheets)
样式定义如何显示HTML元素
样式通常存储在样式表中
外部样式表可以极大提高工作效率
外部样式表通常存储在CSS文件中

CSS语法规则

CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。

     h1     {color: red;     font-size: 14px;}
# 选择器      声明(属性: 值)     声明(属性: 值)

值的不同写法和单位; (eg: 设置颜色)
如果值为若干单词, 则要给值加引号
多重声明, 需要用分号将每个声明分开

设置样式表的三种分类

内联样式表
内部样式表
外部样式表

CSS样式创建

标签里设置:

<p style="color:red;"> hello</p>

html文件头部设置:

<style> p {color:red;}</style>

外部CSS文件中设置:

<style> p {color:red;}</style>
html中调用,在头部写入:<link rel="stylesheet" type="text/css" href="xxx.css">

CSS样式优先级

前者的设置会被后者覆盖:
• 浏览器缺省设置
• 外部样式表
• 内部样式表(位于 <head> 标签内部)
• 内联样式(在HTML元素内部)

选择器

标签选择器
id选择器
类选择器
属性选择器

CSS背景

CSS 允许应用纯色作为背景, 也允许使用背景图像创建相当复杂的效果。
• 背景色: background
• 背景图像: background-image
• 背景重复: background-repeat
• 背景定位: background-position
• 背景关联: background-attachment

CSS文本

CSS 文本属性可定义文本的外观,可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进等。
• 缩进文本: text-indent
• 水平对齐: text-align
• 文字间隔: word-spacing; letter-spacing
• 字符转换: text-transform
• 文本装饰: text-decoration
CSS 字体属性定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)
• 指定字体系列: font-family
• 字体风格: font-style(normal, italic, oblique)
• 字体大小: font-size

CSS链接

链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
• a: link - 普通的、未被访问的链接
• a: visited - 用户已访问的链接
• a: hover - 鼠标指针位于链接的上方
• a: active - 链接被点击的时刻
常用的属性: text-decoration 属性大多用于去掉链接中的下划线

CSS表格

• 表格边框: border: 1px solid blue;
• 表格宽度和高度: width:100%; height:50px;
• 表格文本对齐: text-align: right; 和 vertical-align:bottom;
• 表格内边距: padding 上右下左
• 表格颜色: background-color: green; 和 color: white;