02.web入门之CSS

2021-10-25 11:00:02 阅读：116 来源： 互联网

标签：02 web 样式元素 color 样式表 border 选择器 CSS

1.CSS的作用

查看如下代码

如果使用HTML标记中的属性来定义样式，各元素对于样式的属性定义各不相同！

<body bgcolor="silver" text="bule">
 <h2>h2 text</h2>
 <hr color="red"/>
 Some Text here.
</body>

在这里插入图片描述

<style type="text/css">
	body{
		background-color: silver;
		color: blue;
	}
	h2{
		background-color: orange;
		color: green;
	}
	hr{
		color:red;
	}
</style>
</head>
<body>
	<h2>h2 text</h2>
	 <hr/>
	 Some Text here.
</body>

在这里插入图片描述

2.什么是

CSS(CSS Cascading Style Sheets):层叠样式表，又叫级联样式表，简称样式表
用于HTML文档中元素的样式定义
实现了将内容与表现分离
提高代码的可重用性和可维护性

CSS和HTML之间的关系
HTML用于构建网页的结构
CSS用于构建HTML元素的样式
HTML是页面的内容组成，CSS是页面的表现

在这里插入图片描述

3.使用CSS

HTML属性与CSS样式的使用原则
w3c建议尽量使用CSS取代HTML属性
实现内容和表现的分离
如果HTML所特有的属性，则使用HTML属性

在这里插入图片描述

使用CSS样式的方式
内联方式

样式定义在单个的HTML元素中

内部样式表

样式定义在HTML页的头元素中

外部样式表

将样式定义在一个外部CSS文件中(.css文件)
HTML页面引用样式表文件

3.1 内联方式使用CSS

样式定义在HTML元素的标准属性style里
CSS语法

只要将分层隔离开的一个或者多个属性/值对作为元素的style属性的值
属性和属性值之间用：连接
多对属性之间用:隔开

<h1 style="background-color: silver; color: blue;">
文本
</h1>

3.2 内部样式表

样式表规则位于文档头元素中的<style>元素内
在文档的<head>元素内添加<style>元素
在<style>元素中添加样式规则

<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	h1{
	color: blue;
	}
	</style>
</head>
<body>
	<h1>文本1</h1>
	<h1>文本2</h1>
</body>

在这里插入图片描述

在<style>元素中添加样式规则

可以定义多个样式规则
每个样式规则有两个部分：选择器和样式声明
选择器：决定哪些元素使用这些规则
样式声明：一对大括号，包含一个或者多个属性/值对

在这里插入图片描述

3.3 外部样式表

第一步：创建一个单独的样式表文件用于保存样式规则

一个纯文本文件，文件后缀为.css
该文件只能包含样式规则
样式规则由选择器和样式声明组成

在这里插入图片描述

第二步：在需要使用该样式表文件的页面上，使用元素链接需要的外部样式表文件
在文档的元素内添加元素

<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="css/demo3.css" />
</head>
<body>
	<h1>文本1</h1>
	<h1>文本2</h1>
</body>

在这里插入图片描述

可以实现内容与表现分离
可以被电站中的所有页面重用

练习

使用内联样式作为<p>元素设置样式
使用内部样式表为<h1>元素设置样式
使用外部样式表为<h2>元素设置样式

在这里插入图片描述

4.CSS语法规范总结

内联样式：由样式声明组成

<h1 style=“background-color:silver; color：blue;”>

样式表（内部样式表或者为外部样式表）
由多个样式规则组成
每个样式规则有两个部分：选择器和样式声明

在这里插入图片描述

5.CSS样式表特征

继承性

大多数CSS的样式规则可以被继承

层叠性

可以定义多个样式
不冲突时，多个样式表中的样式可层叠为一个

优先级

样式定义冲突时，按照不同样式规则的优先级来应用样式

浏览器缺省设置低
外部样式表或者内部样式表
- 就近有限
内联样式高

相同的样式，如果重复定义，以最后一次的定义为准

练习：
- 测试CSS样式优先级

为<h3>元素定义样式
使用内联样式为其定义字体颜色为灰色
在内部样式表中，为其定义字体颜色为红色，且字体大小为30px
在外部样式表demo.css中，定义其字体颜色为黄色字体大小为10px,且背景色为银灰色
查看效果
改变内部样式表和外部样式表的位置，查看效果

！important规则
！important可以调整样式规则的优先级
将！important添加在样式规则之后，中间用空格隔开
选择器{属性：属性值！Important；}

在这里插入图片描述

6.选择器

6.1 通用选择器

通用选择器，显示为一个星号（*）
可以与任何元素匹配
常用于设置一些默认样式，比如设置整个文档的默认字体和大小

<style type="text/css">
*{
color: red;
font-size: 39pt;
font-family: "微软雅黑";
}
</style>

6.2 元素选择器

html文档的元素就是选择器
比如<p>，<h1>等

	
h1{
	color: red;
}
p{
	color: green;
}
div{
	color: yellow;
}

6.3 类选择器

语法为：.className{color:red}
所有能够附带class属性的元素都可以使用此样式声明
将元素的class属性的值设置为样式类名

<style type="text/css">
.myClass{
background-color: pink;
font-size: 35pt;
}
</style>
</head>
<body>
	<h2 class="myClass">h2文本</h2>
	<p class="myClass">p文本</p>
</body>

在这里插入图片描述

可以将类选择器和元素选择器结合起来使用，以实现对某种元素中不同样式的细分控制（分类选择器）
语法：元素选择器.className{}
- 先声明一个元素选择器
- 然后使用一个点号（.）代表将使用类选择器
- 然后声明一个类的名称
- 最后使用一对大括号声明样式规则
将样式规则与附带class属性的某种元素匹配
- 元素的class属性的值为分类选择器中指定的样式类名

<style type="text/css">
.myClass{
background-color: pink;
font-size: 35pt;
}
.important{
font-weight: bold;
color: yellow;
}
p.important{
font-family: "微软雅黑";
}
</style>
</head>
<body>
	<h2 class="myClass">h2文本</h2>
	<p class="myClass important">p文本</p>
</body>

在这里插入图片描述

6.4 id选择器

id选择器以一种独立于文档元素的方式来指定样式
它仅作用于id属性的值
语法为：
- 选择器前面需要有一个#号
- 选择器本身则为文档中某个元素的id属性的值

<style type="text/css">
#msg{
	color: red;
	background-color: yellow;
}
</style>
</head>
	<body>
	<span id="msg">页面上有美女</span>
</body>

在这里插入图片描述

6.5 群组选择器

选择器声明为以逗号隔开的选择器列表
将一些相同的规则作用于多个元素

<style type="text/css">
h2,p{
background-color: yellow;
color: red;
}

</style>
</head>
<body>
	<h2 class="myClass">h2文本</h2>
	<p class="myClass important">p文本</p>
</body>

在这里插入图片描述

6.6 后代选择器

依据元素在其位置的上下文关系来定义样式
又称为包含选择器，用于选择作为某元素后代的元素
- 选择器一段包括两个或多个用空格分隔的选择器

<style type="text/css">
h2 span{
	color:red;
}
</style>
</head>


<body>
	<h2 class="">h2文本
		<span>孩子myClassspan</span>
	</h2>
	<span>兄弟span</span>
</body>

在这里插入图片描述

6.7 子代选择器

子代选择器要求选择器之间只能存在父子关系
不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素
- 使用一个特殊的符号大于号（>）作为子结合符

<style type="text/css">
h2>span{
color:red;
}
</style>
</head>
<body>
<h2 class="myClass">h2文本
	<span>孩子span</span>
	<p><span>孙子span</span></p>
</h2>
<span>兄弟span</span>
</body>

在这里插入图片描述

6.8 伪类选择器

伪类用于向某些选择器添加特殊的效果
使用冒号（：）作为结合符，结合符左边是其他选择器，右边是伪类
- 选择器:伪类选择器
CSS的伪类选择器可以分为
- 链接伪类
- 动态伪类
- 目标伪类
- 结构伪类
- 否定伪类
- 元素状态伪类
链接伪类
:link，适用于尚未访问的链接
:visited,适用于访问过的链接
动态伪类，用于呈现用户操作
:hover，适用于鼠标悬停在HTML元素时
:active，适用于HTML元素被激活时
:focus，适用于HTML元素获取焦点时

<style type="text/css">
a:link{
	color: black;
	font-size: 15pt;
}
a:visited{
	color: pink;
	font-size: 15pt;
}
a:hover{
	color: red;
}
input:active{
	background-color: yellow;
}
</style>

<a href="01通用选择器.html">未访问过的链接</a><br><br>
<a href="02元素选择器.html">访问过的链接</a><br /><br>
<input type="button" value="ClickMe" />

在这里插入图片描述

<style type="text/css">
.txt{
color:gray;
font-size: 9pt;
}
.txt:focus{
color: black;
font-size: 11pt;
}
</style>
</head>
<body>
<input class="txt" type="text" value="用户名" />
<input class="txt" type="text" value="地址" />

在这里插入图片描述

6.9 选择器优先级

选择器类型	权值
元素选择器	0,0,0,1
类选择器	0,0,1,0
伪类选择器	0,0,1,0
ID选择器	0,1,0,0
内联样式	1,0,0,0

选择器的权值加到一起，大的优先；如果权值相同，后定义的优先

7.尺寸与边框

7.1 尺寸单位

%：百分比

in：英寸

cm：厘米

mm：毫米

pt：磅（1pt等于1/72英寸）

px:像素（计算机屏幕上的一个点）

em：1em等于当前的字体尺寸，2em等于当前字体尺寸的两倍

7.2 颜色单位

rgb(x,x,x):RGB值，如rgb（255,0,0）

rgb(x%,x%,x%):RGB百分比值，如rgb（100%,0%，0%）

#rrggbb:十六进制数，如#ff0000

#rgb:简写的十六进制，如#f00

表示颜色的英文单词，如red

7.3 尺寸属性

尺寸属性适用于设置元素的宽度和高度

单位一般为像素或百分比

宽度属性

width

max-width

min-width
高度属性

height

max-height

min-heigth

<style type="text/css">
p{
	border:
	1px
	solid
	red;

}
p.first{
	min-width:
	300px;
	max-width:
	500px;
}
</style>
</head>


<body>
<p>
	From configuration to security, 
	web apps to big data – whatever 
	the infrastructure needs of your
	application may be, there is a Spring 
	Project to help you build it. 
	Start small and use just 
	what you need – Spring is modular by design.
</p>
<p class="first">
	From configuration to security, 
	web apps to big data – whatever 
	the infrastructure needs of your
	application may be, there is a Spring 
	Project to help you build it. 	
	Start small and use just 
	what you need – Spring is modular by design.
</p>
</body>

在这里插入图片描述

7.4 溢出

使用尺寸属性控制框的大小，如果内容需要的空间大于本身的空间，会导致内容溢出

overflow:当内容溢出元素框时如何处理
overflow-x：
overflow-y：

viside 
hidden
scroll
auto

<style type="text/css">


div{

	width:
	130px;
	
	height:
	50px;
	
	border:
	1px
	solid
	black;

}

div.hidden{
	overflow:
	hidden;
}

div.scroll{
	overflow:
	scroll;
}

div.auto{
	overflow:
	auto;
}

</style>

<div>默认为显示，及时超出尺寸，也显示全部内容
</div><br><br>
<div
class="hidden">文本超出尺寸时，隐藏文本不显示
</div><br><br>
<div
class="scroll">总是显示滚动条
</div><br><br>
<div
class="auto">自动1：不超出不显示
</div><br><br>
<div
class="auto">自动2：文本内容超出尺寸时，显示滚动条
</div><br><br>

在这里插入图片描述

7.5 那些HTML元素可以设置尺寸

块级元素，如
p
div
h1,h2,h3,h4,h5,h6
ul,ol,li,dl,dt,dd等
存在width,height属性的元素
img
table等

7.6 边框属性

边框简写方式
border:width style color;
单边定义
border-left/right/top/bottom:width style color;
border-width
border-left/right/top/bottom-width
border-style
border-left/right/top/bottom-style
border-color
border-left/right/top/bottom-color
边框颜色，可设置为值transparent(用于创建有宽度的不可见边框)

<style type="text/css">
div{
width: 200px;
height:50px;
}
#d1{
border: 1px solid red;
}
#d2{
border-left: 2px solid red;
}
#d3{
border-right-width: 10px;
border-right-color: blue;
border-right-style: dotted;
}
</style>
</head>
<body>
<div id="d1"></div><br>
<div id="d2"></div><br>
<div id="d3"></div><br>
</body>

在这里插入图片描述

7.7 边角倒角

border-radius属性
为简写属性，安顺时针顺序设置四个倒角
取值为绝对值或者百分比
单独定义
border-top-left-radius:边框左上角
border-top-right-radius:边框右上角
border-bottom-left-radius:边框左下角
border-bottom-right-radius:边框右下角

<style type="text/css">
div{
border: 2px solid red;
width: 200px;
height: 50px;
}
#d1{
	border-radius: 10px 15px 20px 25px;
}
#d2{
	border-radius: 5px;
}
</style>
</head>
<body>
<div id="d1"></div><br>
<div id="d2"></div>
</body>

在这里插入图片描述

7.8边框阴影

box-shadow:为方框添加一个或多个阴影
取值为多个属性值的列表
box-shadow:h-shadow v-shadow blur spread color inset;
其中
h-shadow:必须，为水平阴影的位置
v-shadow:必须，为垂直阴影的位置
blur：可选，为阴影虚化的尺寸
color:可选，为阴影的颜色
inset：可选，将外部阴影（outset）改为内部阴影
在这里插入图片描述

<style type="text/css">
div{
border: 1px solid red;
width: 200px;
height:50px;
}
#d1{box-shadow: 5px 15px;}
#d2{box-shadow: 10px 10px #ccc;}
#d3{box-shadow: 10px 10px 5px #000;}
#d4{box-shadow: 10px 10px 5px 10px #000<style type="text/css">;}
#d5{box-shadow: 10px 10px 5px 2px #000 inset;}
</style>
</head>
<body>
<div id="d1"></div><br>
<div id="d2"></div><br>
<div id="d3"></div><br>
<div id="d4"></div><br><br>
<div id="d5"></div><br>
</body>
<style type="text/css">

7.9 图片边框

border-image属性：将图片规定为包围div元素的边框
border-image:source width repeat;
也可以分别设置
border-image-source:图片的路径
border-image-width:图片边框的宽度
border-image-repeat:图像边框是否应平铺（repeat），铺满（round）或拉伸（stretch）

<style>
#d1,#d2,#d3{
border: 26px solid red;
width:300px;
height: 300px;
}
#d1{border-image: url(../img/border.png) 26 round;}
#d2{border-image: url(../img/border.png) 26 repeat;}
#d3{border-image: url(../img/border.png) 26 stretch;}
</style>
</head>
<body>
<div id="d1"></div><br>
<div id="d2"></div><br>
<div id="d3"></div><br>

在这里插入图片描述

7.10 轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
简写方式
outline:color style width;
outline-width:轮廓的宽度
outline-style：轮廓的样式
outlint-color:轮廓的颜色

<style type="text/css">
input{
/*outline: blue solid 10;*/
outline-color: yellow;
outline-style: dotted;
outline-width: 1;
}
</style>
</head>
<body>
<input />
</body>

在这里插入图片描述

8. 框模型

框模型（Box Model）定义了元素框处理元素内容，内边框，边框和外边距的方式

在这里插入图片描述

width和height指内容区域的宽度和高度
增加内边距，边框和外边距不会影响内容区域的尺寸但是会增加元素框的尺寸

#box{
	width:70px;
	margin:10px;
	padding:5px;
}

对象实际宽度=左外边距+左侧边框+左侧内边距+宽度+右侧内边距+右侧边框+右侧外边距

css

<style type="text/css">
.box{
	border: 1px solid black;
	width: 200px;
	height: 100px;
	padding:20px;
	margin: 40px;
}
</style>

html

<body>
<div class="box">
	This is content.
	This is content.
	This is content.
</div>
</body>

在这里插入图片描述

8.1外边距

围绕在元素边框周围的空白区域是外边距
会在元素外创建额外的空白
外边距是透明的
div{
border:2px solid red;
width:200px;
height:50px;
}
#d1{
margin-top:15px;
}
在这里插入图片描述

8.2 外边距margin

外边距：与下一个元素之间的空间量
margin:value;
单边设置
margin-top/right/bottom/left : value;
外边距的属性值可能为px（像素）,百分比（%）或自动（auto）,也可以为负值

div{
	width:150px;
	height:150px;
	border:2px solid #0f0;
	margin-top:10xp;
	margin-right:20px;
	margin-left:40px;
}

在这里插入图片描述

默认情况下以HTML块级元素都存在外边距
body
div
h1,h2,h3,h4,h5,h6
p…
声明margin属性，可以覆盖默认样式
body,p,div,h1,h2,h3,h4,h5,h6,pre{
margin:0;
}

margin可取值为auto，由浏览器计算外边距
实现水平方向居中显示效果

div{
		width:100px;
		heigth:100px;
		border:1px solid black;
		margin:auto;
}

设置水平居中
在这里插入图片描述

外边距的简洁写法
外边距的简捷写法有以下几种：
margin: value(四个方向相同)；
margin：value(上下) value(左右)；
margin：value(上) value(左右) value（下）；
margin：value（上） value（右） value（下） value(左)

div{
	width:150px;
	height:150px;
	border:2pxx solid #0f0;
	margin:10px 20px 30px 40px; 
}

在这里插入图片描述

8.3外边距合并

当两个垂直外边距相遇时，他们将形成一个外边距，称为外边距合并
合并后的外边距的高度等于两个发生合并的外边距的高度中较大者
在这里插入图片描述

标签：02,web,样式,元素,color,样式表,border,选择器,CSS
来源： https://blog.csdn.net/weixin_37636107/article/details/120354589

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

02.web入门之CSS

1.CSS的作用

2.什么是

3.使用CSS

3.1 内联方式使用CSS

3.2 内部样式表

3.3 外部样式表

4.CSS语法规范总结

5.CSS样式表特征

6.选择器

6.1 通用选择器

6.2 元素选择器

6.3 类选择器

6.4 id选择器

6.5 群组选择器

6.6 后代选择器

6.7 子代选择器

6.8 伪类选择器

6.9 选择器优先级

7.尺寸与边框

7.1 尺寸单位

7.2 颜色单位

7.3 尺寸属性

7.4 溢出

7.5 那些HTML元素可以设置尺寸

7.6 边框属性

7.7 边角倒角

7.8边框阴影

7.9 图片边框

7.10 轮廓

8. 框模型

8.1外边距

8.2 外边距margin

8.3外边距合并