JavaWeb——CSS-EW帮帮网

一、什么是CSS

CSS(Cascading Style Sheet)：层叠样式表，是一种用于描述网页内容外观和样式的语言，主要用于控制网页的布局、颜色、字体、间距、动画等视觉效果。

CSS基本语法：

CSS基本语法十分简单，基本由以下几个部分组成：

selector {
	property: value;
	property: value;
	...
}

其中，selector表示要设置样式的HTML元素，property表示要设置的样式属性，value则表示属性的取值。例如，如果我们要设置一个p标签的字体颜色为红色：

p{
    color:red;
}

CSS引入方式：

行内样式：写在标签的Style属性中。

<p style="color:red;">这是一段红色的文字</p>

内嵌样式：写在style标签中，可以写在页面的任何位置，但通常约定写在head标签中。
```
<head>
	<style>
		p {
			color: red;
		}
	</style>
</head>
```
外联样式：写在一个单独的.css文件中，这时候需要link标签在网页中引入。
```
<head>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
```

二、CSS的常用样式属性

字体样式
1. font-size：字体大小，可以使用像数值(px)、百分比(%)、em单位等。
2. font-family：字体种类，可以设置多个备选字体、用逗号隔开。
3. font-weight：字体粗细，一般有normal(普通)、bold(加粗)两种。
4. font-style：字体风格：可以设置italic(斜体)或normal(正体)。
文本样式
1. color：字体颜色，可以使用十六进制颜色值、RGB颜色值、颜色名称等。
2. text-align：文本水平对齐方式，可以设置left、center、right等。
3. text-decoration：文本修饰（如下划线、删除线等），可以设置underline、line-through等。
4. text-transform：文本转换（如大写、小写等），可以设置uppercase、lowercase等。
盒子模型样式
1. width：盒子宽度，可以使用像素值（px）、百分比（%）等。
2. height：盒子高度，与宽度类似。
3. margin：盒子外边距，可以设置上、右、下、左四个方向的外边距值，也可以只设置其中的某几个。
4. padding：盒子内边距，与外边距类似。
5. border：盒子边框，可以设置边框类型、粗细、颜色等。
6. box-sizing：盒子模型的计算方式，可以设置content-box（默认）或border-box。如果设置为border-box，width属性将包含元素的内容、内边距和边框。
背景样式
1. background-color：背景颜色，与color属性类似。
2. background-image：背景图像，可以设置图片的URL地址。
3. background-repeat：背景图像平铺方式，可以设置repeat（平铺）、no-repeat（不平铺）等。
4. background-position：背景图像位置，可以设置像素值（px）或百分比（%）。

三、CSS简单用例

设置字体样式

p {
	font-size: 16px;
	font-weight: bold;
	font-family: "Microsoft Yahei",sans-serif;
	font-style: italic;
	color: #333;
}

设置文本样式

p {
	text-align: center;
	text-decoration: underline;
	text-transform: uppercase;
	color: #333;
}

设置盒子模型样式

.box {
	width: 300px;
	height: 200px;
	margin: 20px auto;
	padding: 20px;
	border: 1px solid #ccc;
	box-sizing: border-box;
}

设置背景样式

.box {
	background-color: #f5f5f5;
	background-image: url('bg.png');
	background-repeat: no-repeat;
	background-position: center;
}

四、 CSS拓展

CSS选择器

在前面的示例中，我们提到了selector选择器，通过它可以选择要设置样式的HTML元素。

标签选择器：通过HTML标签名称选择元素。
```
p {
	color: red;
}
```
类选择器：通过HTML元素的class名称选择元素。
```
.intro {
	color: gray;
	font-size: 18px;
}
```
ID选择器：通过HTML元素的id名称选择元素。
```
#header {
	background-color: #fff;
}
```
通配选择器：通过“*”号选择页面中所有元素。
```
* {
	margin: 0;
	padding: 0;
}
```
组合选择器：将多个选择器组合起来，逗号隔开。
```
h1, h2, h3 {
	color: white;
}
```
后代选择器：通过元素嵌套关系选择元素，使用空格隔开。
```
ul li {
	list-style: none;
}
```

CSS权重

在CSS中，样式属性生效顺序是按照CSS权重来决定的。

权重级别	规则
1	给文档中的元素设置style属性
2	ID选择器
3	类选择器、属性选择器和伪类选择器
4	标签选择器和伪元素选择器
5	通配选择器和继承样式

CSS盒子模型

每个HTML元素都可以看作一个盒子，由四部分组成：内容（content）、内边距（padding）、边框（border）和外边距（margin）。默认情况下，元素的宽度只包括内容，不包括填充、边框和边距。如果想要将元素的宽度设置为包括内边距和边框，请使用box-sizing属性。

JavaWeb——CSS

一、什么是CSS

二、CSS的常用样式属性

三、CSS简单用例

四、 CSS拓展

网站公告

今日签到

热门文章

最新发布