JavaWeb——CSS基础

最新推荐文章于 2024-05-19 10:58:35 发布

Zzz5270

最新推荐文章于 2024-05-19 10:58:35 发布

阅读量193

点赞数

分类专栏： JavaWeb 文章标签： html css javaweb

本文链接：https://blog.csdn.net/pary__for/article/details/110879151

版权

JavaWeb 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

一、CSS概述

CSS：层叠样式表；

二、代码规范

放置规范：
在<style>标签内容体中书写CSS样式代码，<style>标签放置在<head>标签之中；
格式规范：

选择器名称 { 属性名：属性值；属性名：属性值; ...... }

<html>
	<head>
		<title>标题</title>
		<style>
			span{font-size:100px;
				color:red;
				border:1px solid blue;
			}
		</style>
	</head>
	<body>
		<span>111111111111</span>
		<span>222222222222</span>
	</body>
</html>

代码规范：
选择器名称 { 属性名：属性值；属性名：属性值; … }
一个属性名有多个属性值，多个值之间用“空格”隔开；
注释：/* 注释内容 */

三、元素选择器

元素选择器：以HTML标签名作为选择器名称；
适用范围：将相同样式作用在多个同名标签；

标签名 {
	/* CSS样式代码 */
}

在这里插入图片描述

四、类选择器

类选择器：类名作为选择器名称；
适用范围：将样式一次作用在相同类名的标签上；

.类名 {
	/* CSS样式代码 */
}

在这里插入图片描述

五、ID选择器

id选择器：id值作为选择器名称；
id值，在本页面是唯一的；
适用范围：将样式作用在某个标签上；

#id值 {
	/* CSS样式代码 */
}

在这里插入图片描述

六、组合方式

层级关系

选择器1 选择器2 ......{
	/* CSS样式代码 */
}
注意：它表示 选择器1 下的 选择器2；

在这里插入图片描述

七、边框属性

注意：所有的HTML标签都有边框，默认边框不可见；

border：设置边框样式，格式：宽度样式颜色；
width：设置标签宽度；
height：设置标签高度；
background-color：设置标签背景颜色；

在这里插入图片描述

八、布局

float：

选择器 {float:属性值;}

常用属性值：	none:元素不浮动
			left:元素向左浮动
			right:元素向右浮动

注意：元素设置浮动属性后，会脱离原有文档流（脱离原有的板式），从而会影响其他元素的样式，所以设置浮动以后，页面样式需要重新调整。

九、转换

display
可以使元素在行内元素和块元素之间相互转换；
注：
块元素：<h1>, <p>, <div>, <ul> 等；（会自动换行）
行内元素：<span>, <a> 等；（不会自动换行）

选择器{display:属性值}

常见属性值：	block:块元素；
			inline:行内元素；
			none:隐藏，不显示，也不占用页面空间；

在这里插入图片描述

十、字体

font-size：字体大小；
color：颜色；

十一、盒子模型

1. 什么是盒子模型

所有的 HTML 元素都可以看成一个四边形，即一个盒子；
用 CSS 来设置元素盒子的 内边距、边框、外边距 的样式的方式；
相当于设置盒子的样式，我们称之为盒子模型；

2. 边框（border）

在这里插入图片描述

注：可直接用通用性设置，例如：border:1px solid red;
（后面内边距、外边距同理）

3. 内边距

在这里插入图片描述

4. 外边距

在这里插入图片描述

十二、CSS和HTML的结合方式

1. 内部样式

（1）行内样式

通过标签的 style 属性来设置元素的样式；
适用环境：更加针对性的修改某个标签的样式；

<html 标签 style="CSS样式代码"/>

在这里插入图片描述

（2）`<style></style>`样式

适用环境：适合在页面中进行样式复用；

在这里插入图片描述

2. 外部样式

（1）`<link/>`标签方式

<link/>又称为链入式，试将所有的样式放在一个或多个以 .css 为扩展名的外部样式表文件中，通过<link/>标签将样式连接到 HTML 文档中；
适用范围：适合不同页面进行样式的复用；

<link rel="stylesheet" type="text/css" herf="css文件路径"/>

- rel="stylesheet":		固定值，表示 样式表；
- type="text/css":		固定值，表示 css 类型；
- herf="css文件路径":	表示 css 文件位置；

css文件如下：
在这里插入图片描述
HTML 文件如下：

Zzz5270

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb——CSS基础

一、CSS概述CSS：层叠样式表；二、代码规范放置规范：在<style>标签内容体中书写CSS样式代码，<style>标签放置在<head>标签之中；格式规范：选择器名称 { 属性名：属性值；属性名：属性值; ...... }<html> <head> <title>标题</title> <style> span{font-size:100px; color:red;
复制链接

扫一扫