CSS基础知识

最新推荐文章于 2024-03-08 14:14:04 发布

懒人zhou

最新推荐文章于 2024-03-08 14:14:04 发布

阅读量375

点赞数

分类专栏：笔记文章标签： html css

本文链接：https://blog.youkuaiyun.com/z2019jiayou/article/details/116721249

版权

笔记专栏收录该内容

7 篇文章

订阅专栏

CSS基础知识

CSS 规则可以简化网页的格式代码。

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

选择器通常是需要改变样式的 HTML 元素；每条声明由一个属性和一个值组成。属性是自己希望设置的样式属性。每个属性有一个值。

声明以大括号（{}）括起来，每条声明以分号（;）结束，属性和值被冒号（:）分开。

1 选择器

1.1 id选择器

若 HTML 元素已指定 id ，则可以通过 id 选择器来设置元样式。

id 选择器以“#”来定义。若某元素 id = “para1” ，则

#para1
{
    text-align:center;
    color:red;
}

1.2 class选择器

class 选择器用于描述一组元素的样式，可以在多个元素中使用。

class 选择器在HTML中以 class 属性表示，在 CSS 中，类选择器以一个点"."号显示。

.center {
    text-align:center;
}

也可以指定特定的HTML元素使用class。

p.center {
	text-align:center;
}

该代码表示所有的 p 元素使用 class=“center” 让该元素的文本居中。

1.3 分组选择器

每个选择器用逗号分隔，元素具有相同的样式。

h1,h2,p
{
    color:green;
}

1.4 嵌套选择器

设置选择器内部的选择器的样式。例如：

p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class=“marked” 的元素指定一个样式。
.marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式。

2 创建

2.1 外部样式表

若样式需用于多个页面，外部样式表是个不错的选择，它以 .css 扩展名进行保存。

在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。

每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：

<head>
	<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

2.2 内部样式表

适用于单个页面，使用 <style> 标签在定义内部样式表。

<head>
	<style>
		hr {color:sienna;}
		p {margin-left:20px;}
		body {background-image:url("images/back40.gif");}
	</style>
</head>

2.3 内联样式

HTML 中一个元素上应用一次，使用样式（style）属性。

<h2 style="color: green;">这是一个例子</h2>

2.4 多重样式优先级

内联样式 > 内部样式 > 外部样式 > 浏览器默认样式

**注意：**如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

3 背景

属性	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

3.1 背景颜色

background-color 属性定义了元素的背景颜色。

body {background-color:#b0c4de;}

3.2 背景图片

background-image 属性描述了元素的背景图片。

默认情况下，背景图片进行平铺重复显示，以覆盖整个元素实体。

body {background-image:url('paper.gif');}

3.2.1 平铺方向

background-repeat 属性设置图片平铺方向，属性值 repeat-x 表示水平方向平铺，no-repeat 表示图片不平铺显示。

3.2.2 位置

background-position 属性改变图片在背景中的位置，属性值 right top 表示图片位置为右边顶部。

3.2.3 滚动

background-attachment 设置背景图片是否固定或者随着页面的其余部分滚动，默认为 scroll。

值	描述
scroll	背景图片随着页面的滚动而滚动，这是默认的。
fixed	背景图片不会随着页面的滚动而滚动。
local	背景图片会随着元素内容的滚动而滚动。

3.3 简写属性

body {background:#ffffff url('img_tree.png') no-repeat right top;}

属性值的顺序为：

background-color
background-image
background-repeat
background-attachment
background-position

4 文本

color 属性设置文本的颜色。

4.1 对齐方式

text-align 对齐元素中的文本。属性值有 left 、 right 、 center 和 justify ，其中 justify 可以实现两端对齐文本的效果。

vertical-align 属性设置一个元素的垂直对齐方式。

4.2 上、中、下划线

text-decoration属性主要是用来删除链接的下划线。

值	描述
none	默认。标准的文本。
underline	文本下的一条线。
overline	文本上的一条线。
line-through	穿过文本下的一条线。
blink	闪烁的文本。

4.3 大小写转换

text-transform 属性控制文本的大小写。

值	描述
none	默认。定义带有小写字母和大写字母的标准的文本。
capitalize	文本中的每个单词以大写字母开头。
uppercase	文本都是大写字母。
lowercase	文本都是小写字母。

4.4 文本缩进

text-indent 指定文本的第一行的缩进。

4.5 文字阴影

text-shadow 属性应用于阴影文本。

具体：text-shadow: h-shadow v-shadow blur color;

h-shadow 必填，表示水平阴影的位置；v-shadow 必填，表示垂直阴影的位置。都允许负值。
blur 选填，表示模糊的距离。color 选填，表示阴影的颜色。

4.6 其他

属性	描述
direction	设置文本方向
letter-spacing	设置字符间距
line-height	设置行高
text-indent	缩进元素中文本的首行
unicode-bidi	设置或返回文本是否被重写
white-space	设置元素中空白的处理方式
word-spacing	设置字间距

5 字体

5.1 大小

font-size 属性设置字体大小。例如：font-size: 16px;

px 可通过浏览器的缩放工具调整整个页面大小，从而调整文本大小。

em 可以在所有浏览器中调整文本大小，但由于IE浏览器的问题，调整文本的大小时，会比正常的尺寸更大或更小。

% 在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。

使用百分比和EM组合非常有效

body {font-size:100%;}h1 {font-size:2.5em;}h2 {font-size:1.875em;}p {font-size:0.875em;}

5.2 族名

font-family 属性设置元素里的字体族名。例如：font-family: sans-serif;

font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

**注意：**如果字体系列的名称超过一个字，它必须用引号，如Font Family：“宋体”。

例如：p{font-family:"Times New Roman", Times, serif;}

5.3 样式

font-style:normal; 正常显示文本

font-style:italic; 以斜体字显示的文字

font-style:oblique; 倾斜的文字

6 链接

不同的链接可以有不同的样式。

6.1 状态

四个链接状态：

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>菜鸟教程(runoob.com)</title> 
		<style>
            a:link {color:#000000;}      /* 未访问链接*/
            a:visited {color:#00FF00;}  /* 已访问链接 */
            a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
            a:active {color:#0000FF;}  /* 鼠标点击时 */
		</style>
	</head>
    <body>
        <p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
        <p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
        <p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
    </body>
</html>

6.2 删除连接中的下划线

a:link {text-decoration:none;}    /* unvisited link */a:visited {text-decoration:none;} /* visited link */a:hover {text-decoration:underline;}   /* mouse over link */a:active {text-decoration:underline;}  /* selected link */

6.3 设置链接背景色

a:link {background-color:#B2FF99;}a:visited {background-color:#FFFF85;}a:hover {background-color:#FF704D;}a:active {background-color:#FF704D;}

7 列表

无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
有序列表 ol - 列表项的标记有数字或字母

7.1 列表项标志

list-style-type 设置列表项标志的类型。

值	描述
none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。
decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)

7.2 指定列表项标志的图像

list-style-image: url('sqpurple.gif');

但它在所有浏览器中显示并不相同，以下是浏览器兼容性解决方案：

ul{    list-style-type: none;    padding: 0px;    margin: 0px;}ul li{    background-image: url(sqpurple.gif);    background-repeat: no-repeat;    background-position: 0px 5px;     padding-left: 14px; }

例子解释：

ul:
- 设置列表类型为没有列表项标记
- 设置填充和边距 0px（浏览器兼容性）
ul 中所有 li:
- 设置图像的 URL，并设置它只显示一次（无重复）
- 您需要的定位图像位置（左 0px 和上下 5px）
- 用 padding-left 属性把文本置于列表中

7.3 简写属性

ul{ list-style: square url("sqpurple.gif"); }

可以按顺序设置如下属性：

list-style-type
list-style-position (有关说明，请参见下面的CSS属性表)
list-style-image

如果上述值丢失一个，其余仍在指定的顺序，就没关系。

7.4 移除默认设置

list-style-type:none 属性可以用于移除小标志。

默认情况下列表 <ul> 或 <ol> 还设置了内边距和外边距，可使用 margin:0 和 padding:0 来移除。

8 表格

8.1 边框

border 设置表格边框。例如：table, th, td { border: 1px solid black; }

8.2 折叠边框

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开。

table{ border-collapse:collapse; }
table,th, td{ border: 1px solid black; }

9 盒子模型

每一个可见的 html 元素都是一个盒子。

9.1 组成

在这里插入图片描述

一个盒子由以下四个部分组成：content（内容）、padding（内边距）、border（边框）、margin（外边距）。

盒子的宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right；

盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom。

9.2 边框（border）

9.2.1 样式

border-style 属性用来定义边框的样式。

属性值	意义	属性值	意义
none	默认无边框	dotted	点线边框
dashed	虚线边框	solid	实线边框
double	两个边框	groove	凹槽边框
ridge	垄状边框	inset	嵌入边框
outset	外凸边框	hidden	隐藏边框

9.2.2 宽度

border-width 属性定义边框宽度。

9.2.3 颜色

border-color 属性用于设置边框的颜色。

9.2.4 单独设置各边

p{ 
	border-top-style:dotted;    
	border-right-style:solid;    
	border-bottom-style:dotted;    
	border-left-style:solid;
}

简写如下：

border-style 属性可以有1-4个值：

border-style:dotted solid double dashed;
- 上边框是 dotted
- 右边框是 solid
- 底边框是 double
- 左边框是 dashed
border-style:dotted solid double;
- 上边框是 dotted
- 左、右边框是 solid
- 底边框是 double
border-style:dotted solid;
- 上、底边框是 dotted
- 右、左边框是 solid
border-style:dotted;
- 四面边框是 dotted

9.2.5 简写属性

border:5px solid red;

顺序是：

border-width
border-style (required)
border-color

9.2.6 圆角边框

border-radius 属性可以让边框的角变得圆润。

border-radius:50% 为圆形。

9.3 轮廓（outline）

轮廓是绘制于元素周围的一条线，位于边框边缘的外围。

属性	说明	值
outline	在一个声明中设置所有的轮廓属性	outline-color outline-style outline-width inherit
outline-color	设置轮廓的颜色	color-name hex-number rgb-number invert inherit
outline-style	设置轮廓的样式	none dotted dashed solid double groove ridge inset outset inherit
outline-width	设置轮廓的宽度	thin medium thick length inherit

9.4 外边距（margin）

9.4.1 单边外边距属性

margin-top:100px;margin-bottom:100px;margin-right:50px;margin-left:50px;

9.4.2 简写属性

margin 属性可以有一到四个值。

margin:25px 50px 75px 100px;
- 上边距为25px
- 右边距为50px
- 下边距为75px
- 左边距为100px
margin:25px 50px 75px;
- 上边距为25px
- 左右边距为50px
- 下边距为75px
margin:25px 50px;
- 上下边距为25px
- 左右边距为50px
margin:25px;
- 所有的4个边距都是25px

9.5 内边距（padding）

类似 9.4 外边距（margin）。