CSS入门笔记（一）

最新推荐文章于 2023-09-21 11:36:32 发布

酒千觞

最新推荐文章于 2023-09-21 11:36:32 发布

阅读量246

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/songAX/article/details/88241605

CSS 专栏收录该内容

1 篇文章

订阅专栏

本文深入讲解CSS（层叠样式表）的基本概念与应用技巧，包括样式层叠次序、注释、选择器、背景属性、文本格式、字体、链接、列表和表格等核心内容，帮助读者掌握网页布局和美化的关键技术。

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

CSS：Cascading Style Sheets（层叠样式表）实现了内容与表现分离。

HTML用来定义文档内容，CSS则定义了如何显示HTML元素（表现）

样式层叠次序（从上到下优先级依次降低）：

1.内联样式（在 HTML 元素内部）：在HTML元素中使用"style" 属性

2.内部样式表（位于 < head > 标签内部）：使用< style > 元素

3.外部样式表

4.浏览器缺省设置

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明
选择器 {属性1：值；属性2：值；}
选择器：需要改变样式的 HTML 元素，每条声明由一个属性和一个值组成，属性和值是HTML元素的属性和值

p {color:red;text-align:center;}

一、注释：CSS注释以 " /* " 开始, 以 " */ " 结束
二、id选择器（为标有特定 id 的 HTML 元素指定特定的样式，CSS 中 id 选择器以 “#” 来定义）

#para1
 {
 text-align:center;
 color:red;
 } 
 
 <p id="para1">Hello World!!!</p>

三、class 选择器（用于描述一组元素的样式，在 CSS 中，类选择器以一个点"."号显示）

<style>
#para1
{
 text-align:center;
 color:red;
} 
</style>

<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>

也可以指定特定的HTML元素使用class选择器，例：指定所有的 p 元素使用 class=“center” 让该元素的文本居中：

p.center {text-align:center;}

三、背景属性background
1.background-color 属性定义了元素的背景颜色，body {background-color:#b0c4de;}
2.background-image 属性描述了元素的背景图像，body {background-image:url(‘paper.gif’);}
3.background-repeat属性约定背景图向水平平铺还是垂直平铺
4.background-attachment属性规定背景图像是否固定或者随着页面的其余部分滚动
5.background-position 属性改变图像在背景中的位置top、bottom、left、right 和 center任意两个组合

四、文本格式
1.文本颜色（color属性，而background属性是背景）
2.文本对齐（text-align属性）
3.文本修饰（text-decoration属性主要是用来删除链接的下划线）
4.文本转换（text-transform属性用来指定在一个文本中的大写和小写字母，所有字句变成大写或小写字母，或每个单词的首字母大写）
5.文本缩进（text-indent 属性可指定所有元素的第一行都缩进一个给定的长度）
6.文本间隔（word-spacing 属性可以改变字（单词）之间的标准间隔）

五、字体
1.字体系列（font-family 属性设置文本的字体系列）如：p{font-family:“Times New Roman”, Times, serif;}
2.字体样式（font-style属性用于指定斜体文字的字体样式属性：正常、斜体、倾斜的文字）
3.字体大小（font-size 属性设置文本的大小，单位：像素px或者em）

六、链接
四个链接状态：
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

七、列表
1.list-style-type属性指定列表项标记的类型。
none：不使用项目符号
disc：实心圆
circle：空心圆
square：实心方块
demical：阿拉伯数字
lower-alpha：小写英文字母
upper-alpha：大写英文字母
lower-roman：小写罗马数字
upper-roman：大写罗马数字
2.list-style-image可指定列表项标记为一个小图像
3.缩写属性实例：list-style: square url(“sqpurple.gif”);

八、表格
1.使用border属性，指定CSS表格边框指定CSS表格边框
2.border-collapse:collapse;去除双边框
3.Width和height属性定义表格的宽度和高度
4.表格文字对齐，text-align属性设置水平对齐方式，像左，右，或中心、垂直对齐属性设置垂直对齐，比如顶部，底部或中间
5.表格填充，使用padding控制每个格子的大小
6.指定边框的颜色，和th元素的文本和背景颜色,如下：

table, td, th
    
{
        
border:1px solid green;
        
}
        
th
        
{
        
background-color:green;
        
color:white;
        
}