CSS基础01 - HTML页面嵌套使用CSS的三种方式

Posted L-FHy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS基础01 - HTML页面嵌套使用CSS的三种方式相关的知识,希望对你有一定的参考价值。

CSS基础01

什么是CSS,有什么作用?

  • CSS(Cascading Style Sheet):层叠样式表语言。
  • CSS的作用是:
    • 修饰html页面,修饰HTML页面张的某些元素的样式,让HTML页面更好看。
    • CSS好比是HTML的化妆品一样。
  • HTML还是主体,CSS依赖HTML。CSS的存在就是修饰HTML。所以新建的文件还是xxx.html文件。

CSS我们要求掌握到什么程序?

  • 常见的CSS样式要求会写。
  • 别人写的CSS样式要能看懂。

在HTML页面中嵌套使用CSS的三种方式

  • 第一种方式:在标签内部使用style属性来设置元素的CSS样式,这种方式称为内联定义方式。
    • 语法格式:
<标签> style="样式名:样式值;样式名:样式值;样式名:样式值;..."</标签>	
  • 第二种方式:在head标签中使用style块,这种方式称为样式块方式。
    • 语法格式:
<head>
	<style type="text/css">
		选择器
			样式名 : 样式值;
			样式名 : 样式值;
			......
		
		选择器
			样式名 : 样式值;
			样式名 : 样式值;
			......
		
	</style>
</head>
  • 第三种方式:链入外部样式表文件,这种方式最常用。(将样式写到一个独立的xxx.css文件当中,在需要的网页上直接引入css文件,样式就引入了)
    • 这种方式容易维护,维护成本较低。
      • xxx.css文件
        • 1.html中引入了
        • 2.html中引入了
        • 3.html中引入了
        • 4.html中引入了
    • 语法格式:
<link type="text/css" rel="stylesheet" href="css文件的路径"/>

HTML中引入CSS样式的第一种方式

<!doctype html>
<html>
	<head>
		<title>HTML中引入CSS样式的第一种方式:内联定义方式</title>
	</head>
	<body>
		
		<!--
			width 宽度样式
			height 高度样式
			background-color 背景色样式
			display 布局样式 (none表示隐藏,block表示显示)

		-->
		<div style="width : 300px; height : 300px; background-color : #CCFFFF; display : block; border-color : red; border-width : 1px; border-style : solid"></div>

		<br><br>
		
		<!--
			边框样式还能这样写:
				border : 1px solid black;
		-->
		<div style="width : 300px; height : 300px; background-color : #CCFFFF; display : block; border : 1px solid black"></div>


	</body>
</html>

HTML中引入CSS样式的第二种方式

<!doctype html>
<html>
	<head>
		<title>HTML中引入CSS样式的第二种方式:样式块</title>

		<style type="text/css">
			/*
				这是CSS的注释
			*/
			/*
				id选择器
				语法格式:
					#id
						样式名 : 样式值;
						样式名 : 样式值;
						样式名 : 样式值;
						...
					
			*/
			#usernameErrorMsg 
				color : red;
				font-size : 12px;
			

			/*
				标签选择器
				语法格式:
					标签名
						样式名 : 样式值;
						样式名 : 样式值;
						样式名 : 样式值;
						...
					
				标签选择器作用的范围比id选择器广。
			*/
			div 
				background-color : black;
				border : 1px solid red;
				width : 100px;
				height : 100px;
			

			/*
				类选择器
				语法格式:
					.类名
						样式名 : 样式值;
						样式名 : 样式值;
						样式名 : 样式值;
						...
					
			*/
			.myclass
				border : 1px solid red;
				width : 400px;
				height : 30px;
			
			

		
		</style>
	</head>
	<body>
		
		<!--
			设置样式字体大小12px,颜色为红色!
		-->
		<span id="usernameErrorMsg">对不起,用户名不能为空!</span>

		<div></div>
		<div></div>
		<div></div>

		<br>
		<!--class相同的标签,可以认为是同一类标签-->
		<input type="text" class="myclass"/>

		<br><br>

		<select class="myclass">
			<option>专科</option>
			<option>本科</option>
		</select>	
	

	</body>
</html>

HTML中引入CSS样式的第三种方式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>HTML中引入CSS样式的第三种方式: 引入外部独立的CSS文件</title>

        <!--引入-->
        <link rel="stylesheet" type="text/css" href="1.css"/>

    </head>

    <body>
        <a href="http://www.baidu.com">百度</a>
        <br>
        <span id="baiduSpan">点击我链接到百度哦!</span>
    </body>

</html>
1.css文件
/*
    标签选择器:
        标签名
            样式名 : 样式值;
            样式名 : 样式值;
            样式名 : 样式值;
            ...
        
*/
a
    text-decoration: none;


/*
    id选择器:
        #id
            样式名 : 样式值;
            样式名 : 样式值;
            样式名 : 样式值;
            ...
        

*/
/*
    cursor:是鼠标样式,pointer是小手,hand也是,
    但是hand有浏览器兼容问题,尽可能使用pointer
*/
#baiduSpan
    text-decoration: underline;
    cursor: pointer;

列表样式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>HTML中引入CSS样式的第三种方式: 引入外部独立的CSS文件</title>

        <!--引入-->
        <link rel="stylesheet" type="text/css" href="1.css"/>

    </head>

    <body>
        <a href="http://www.baidu.com">百度</a>
        <br>
        <span id="baiduSpan">点击我链接到百度哦!</span>
    </body>

</html>

CSS样式的绝对定位

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS样式的绝对定位</title>

        <style type="text/css">
            #div1
                background-color: red;
                border: 1px black solid;
                width: 300px;
                height: 300px;
                position: absolute;/*绝对定位*/
                left: 100px;
                top: 100px;
            
        </style>
    </head>
    <body>
        <div id="div1"></div>
    </body>
</html>

Web前端-CSS基础与应用

Web前端-CSS基础

Web前端-CSS

CSS历史

1.1990年,Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年,Web真正走出实验室。

2.1994年哈坤·利提出了CSS的最初建议

3.1997年初,W3C组织负责CSS的工作组开始讨论第一版中没有涉及到的问题

4.1998年5月:CSS2.0是一套全新的样式表结构,是由W3C推行的,同以往的CSS1.0或CSS1.2完全不一样,CSS2.0推荐的是一套内容和表现效果分离的方式HTML元素可以通过CSS2.0的样式控制显示效果,可完全不使用以往HTML中的table和td来定位表单的外观和样式,只需使用div和此类HTML标签来分割元素,之后即可通过CSS2.0样式来定义表单界面的外观

5.2012年:CSS3.0增加了更多的CSS选择器,可以实现更简单但是更强大的功能

CSS特点简介

丰富的样式定义

CSS提供了丰富的文档样式外观,以及设置文本和背景属性的能力;允许为任何元素创建边框,以及元素边框与其他元素间的距离,以及元素边框与元素内容间的距离;允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

易于使用和修改

CSS可以将样式定义在HTML元素的style属性中,也可以将其定义在HTML文档的heade部分,也可以将样式声明在一个专门的CSS文件中,以供HTML页面引用。总之,CSS样式表可以将所有的样式声明统一存放,进行统一管理

多页面应用

CSS样式表可以单独存放在一个CSS文件中,这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件,在任何页面文件中都以将其引用。这样就可以实现多个页面风格的统一。

层叠

简单的说,层叠就是对一个元素多次设置同一个样式,这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表,而某些页面中某些元素想使用其他样式,就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写,在浏览器中看到的将是最后面设置的样式效果。

页面压缩

在使用HTML定义页面效果的网站中,往往需要大量或重复的表格和font元素形成各种规格的文字样式,这样做的后果就是会产生大量的HTML标签,从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中,可以大大的减小页面的体积,这样在加载页面时使用的时间也会大大的减少。另外,CSS样式表的复用更大程序的缩减了页面的体积,减少下载的时间。

CSS工作原理

工作原理:CSS全称层叠样式表,它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。是能够真正做到网页表现与内容分离的一种样式设计语言,能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言简而言之:css就是一种先选择html元素,然后设定选中元素css属性的机制实质:包含css的网页—>浏览器解析执行(Webkit CSS parser CSS解析器)---->解析后的效果呈现在页面上

CSS版本区别

1.区别:在CSS2基础上新增属性,比如圆角、阴影、:last-child与:nth-last-child()伪类选择器等以前CSS2也有的样式,因为浏览器版本不支持原因,现在CSS3中重新提出并使用,因为现在浏览器越来越高级智能,当然也就兼容HTML5 CSS3了

2.相同点:语法相同,目的相同

3.如何选择css2和css3:普通布局CSS2足够了,需要圆角、阴影、伪类等再使用CSS3,其实CSS3中90%以上css样式是css2的,只是在css2上新增和重用小部分CSS2的样式。

友情提示:要学习CSS3必须的掌握CSS2常用样式和语法、灵活应用

布局技巧,才能灵活使用CSS3样式

CSS的基本语法

<style type="text/css">
    选择器(即修饰对象)
        对象的属性1:属性值
        对象的属性2:属性值
    
</style>

例如:

<html>
	<head>
		<meta charset="UTF-8">
		<title>样式</title>
		<style type="text/css">
			p
				color: red;
			
		</style>
	</head>
	<body>
		<div>
			<p>我是一个段落</p>
		</div>
	</body>
</html>
<!--以上代码将网页中的p段落颜色设为红色-->

CSS为HTML网页添加样式的三种方法

1.行内样式,直接写在特定标签的style属性中;

2.嵌入样式,在head元素中嵌入 <style type="text/css"></style> ,将css规则放入<style>和</style>中;

3.链接样式,在<head>元素中使用外部的样式表,如:

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

友情提示:3种css样式的优先级: 行内样式 > 嵌入样式 > 链接样式

CSS选择器

元素/标签选择器

通过元素进行选择,进行添加样式

例如:

<html>
	<head>
		<meta charset="UTF-8">
		<title>样式</title>
		<style type="text/css">
			h1
				color: blue;
				font-family: "楷体";
		
		</style>
	</head>
	<body>
		<div>
			<h1>我是一级标题</h1>
		</div>
	</body>
</html>

以上代码将h1的文本样式进行改变,CSS中的选择器则是标签名

id选择器

通过元素的id进行选择,添加样式

例如:

<html>
	<head>
		<meta charset="UTF-8">
		<title>样式</title>
		<style type="text/css">
			#abc
				color: blue;
				font-family: "楷体";
		
		</style>
	</head>
	<body>
		<div id="abc">
			<h1>我是一级标题</h1>
		</div>
	</body>
</html>

以上代码是将id为abc的所有的元素进行一个样式的改变

class选择器

通过定义元素的class选择,添加样式

<html>
	<head>
		<meta charset="UTF-8">
		<title>样式</title>
		<style type="text/css">
			.box
				color: blue;
				font-family: "楷体";
		
		</style>
	</head>
	<body>
		<div >
			<h1 class="box">我是一级标题</h1>
		</div>
	</body>
</html>

以上代码是将class为box中的所有的元素进行一个样式的改变

群组选择器

备注:群组选择器,其目的是为了能实现统一设定一些相同的属性,但是每一个之间必须以英文的逗号隔开

<html>
	<head>
		<meta charset="UTF-8">
		<title>样式</title>
		<style type="text/css">
			h1,h3,p
				color: blue;
				font-family: "楷体";
		
		</style>
	</head>
	<body>
		<div >
			<h1 >我是一级标题</h1>
            <h2>我是二级标题</h2>
			<h3>我是三级标题</h3>
			<p>我是一个段落</p>
		</div>
	</body>
</html>

以上代码只会将h1、h3、p元素中的样式进行改变,而h2中的样式则不会改变

包含选择器

提示:前一个标签与被包含标签 之间是有空格间隔的 称为(父子选择器)

<html>
	<head>
		<meta charset="UTF-8">
		<title>样式</title>
		<style type="text/css">
			div h1
				color: blue;
				font-family: "楷体";
		
		</style>
	</head>
	<body>
		<div >
			<h1 >我是一级标题</h1>
			<h3>我是三级标题</h3>
			
		</div>
		<p>我是一个段落</p>
	</body>
</html>

以上代码只有div下的h1样式发生了改变,别的元素则不会发生改变

通配选择器

提示:以*开始起意思代表为所有,但是在开发过程中基本上不使用

<html>
	<head>
		<meta charset="UTF-8">
		<title>样式</title>
		<style type="text/css">
			*
				color: red;
			
			div h1
				color: blue;
				font-family: "楷体";
		
		</style>
	</head>
	<body>
		<div >
			<h1 >我是一级标题</h1>
			<h3>我是三级标题</h3>
			
		</div>
		<p>我是一个段落</p>
	</body>
</html>

以上的代码div中的h3和p标签都会受到*选择的影响,但是因为h1属性包含选择器,权重大于通配选择器,所以h1的样式还由包含选择器掌握

伪类选择器

CSS的伪类选择器:用于向某些选择器添加特殊的效果

<html>
	<head>
		<meta charset="UTF-8">
		<title>伪类选择器</title>
		<style type="text/css">
			a:link
				color: red;
			
			a:visited
				color: blue;
			
			a:hover
				color: yellow;
			
			a:active
				color: black;
			
		</style>
	</head>
	<body>
		<a href="testcss001.html">伪类选择器</a>
	</body>
</html>

提示:1)4种状态的意思

未访问状态(a:link )

已访问状态(a:visited )

鼠标移上状态(a:hover )

激活选定状态(a:active )

2)且一般是应用在a标签上的,别的标签也可以,但是最多的还是a标签上的使用

伪对象选择器

CSS伪对象选择器:用于向被选中元素的内容前面或者后面插入内容

:before 选择器在被选元素的内容前面插入内容。

:after 选择器在被选元素的内容后面插入内容。

注意:before 和after必须和content结合使用,即使没有内容插入也要写content=’ ’

<html>
	<head>
		<meta charset="UTF-8">
		<title>伪对象选择器</title>
		<style type="text/css">
			.box
				color: red;
				border: 1px solid #FF00FF;
			
			.box:after
				content: "然后去吃饭";
			
			.box:before
				content: "先穿好衣服、叠好被子再";
			
		</style>
	</head>
	<body>
		<div class="box">去洗漱</div>
	</body>
</html>

单纯一个div里面的文本则是:去洗漱,但是用了伪对象选择器,对前面和后面进行了文本的追加,在网页上显示的为:先穿好衣服、叠好被子再去洗漱然后去吃饭,但是真是的文本则只有:去洗漱

选择器的权重

权重:权重是指某一因素或指标相对于某一事物的重要程度,其不同于一般的比重,体现的不仅仅是某一因素或指标所占的百分比,强调的是因素或指标的相对重要程度,倾向于贡献度或重要性。通常,权重可通过划分多个层次指标进行判断和计算,常用的方法包括层次分析法、模糊法、模糊层次分析法和专家评价法等

简而言之:可以理解为是份量(就是所占的比重)

权重记忆口诀。从0开始,一个行内样式+1000,一个id+100,一个属性选择器/class或者伪类+10,一个元素名,或者伪元素+1

例如:body #content .data img :hover

最终的权重值是:122;#content是一个id选择器加了100,.data是一个class类选择器加了10,:hover伪类选择器加了10, body和img是元素选择器所以加了1

CSS属性

文本属性

文字大小:font-size 单位:px em:1em=16px

文字颜色:color

文字字体:font-family

文本样式(粗细):font-weight

文本倾斜:font-style

文本修饰:text-decoration

文本转换:text-transform

字间距:letter-spacing

单词间距:word-spacing

文字对齐:text-align

<html>
	<head>
		<meta charset="UTF-8">
		<title>文字</title>
		<style type="text/css">
			p
				font-size: 64px;/*定义字体大小为64像素*/
				color: blue;  /*设置字体颜色为蓝色*/
				font-family: "隶书";  /*设置文字字体为隶书*/
				font-weight: 300;   /*设置文字粗细为300*/
				font-style: oblique; /*设置文字倾斜*/
				text-decoration: underline;/*定义文本下一条线*/
				/*text-decoration: line-through;定义穿过文本的一条线*/
				text-align: center; /*设置文字居中*/
				letter-spacing: 10px;  /*设置字间距为10像素*/
			
		</style>
	</head>
	<body>
		<p>我是一个段落blue</p>
	</body>
</html>

扩展

文字对齐:text-align 参数可以是

left(默认):文本排列到左边

right:文本排到右边

center:文字排列到中间

justify: 实现两端对齐文本效果

文字转换:text-transform 参数可以为

none:默认。定义带有小写字母和大写字母的标准的文本

capitalize:文本中的每个单词以大写字母开头

uppercase:定义仅有大写字母

lowercase:定义无大写字母,仅有小写字母

列表属性

list-style-type:列表的样式

list-style-image:列表导航点图片

list-style-postion:导航点的位置

<html>
	<head>
		<meta charset="UTF-8">
		<title>列表样式</title>
		<style type="text/css">
			li
				width: 250px;   
				color: blue;
				font-size: 30px;
				font-family: "隶书";
				list-style-type: square; /*将列表前面的变成方框*/
				float: left;
			
		</style>
	</head>
	<body>
		<div >
			<ul>
				<li>首页</li>
				<li>我的</li>
				<li>登录</li>
				<li>注册</li>
				<li>加入收藏</li>
				<li>设为主页</li>
			</ul>
		</div> 
	</body>
</html>

CSS边框

设定div的边框样式

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box
				width: 200px;
				height: 200px;
				border-width: 2px 10px 5px 100px;  /*钟表原则 设置边框的线宽*/ 
				border-color: black blue red pink; /*设置边框的线的颜色*/
				border-style: solid;/*设置边框的线的样式*/
			
			.box1
				width: 300px;
				height: 300px;
				border-right-width: 2px;/*设置右边线宽2px*/
				border-right-color: darkred;/*设置右边线颜色*/
				border-right-style: dotted;/*设置右边线样式*/
			
		</style>
	</head>
	<body>
		<div class="box"></div>
		<br />
		<br />
		<div class="box1"></div>
	</body>
</html>

CSS背景

background-color:设置背景颜色

background-image:设置背景图片

background-repeat:设置背景平铺方式

background-position:设置背景对齐方式

CSS浮动

1.默认的常规文档流:页面内容从上到下,从左到右排列。DIV块换行显示

2.浮动会脱离文档流 ,脱离常规文档流而表现为向右或向左浮动,浮动脱离文档流的时候是按照上一个非浮动元素去作为参考的,如果你的上一个元素是浮动的,那么你的参考线会继续向上查找,直到查找到非浮动元素为止

3.当指定了元素浮动之后 ,元素脱离文档流,会按照浮动方向进行排列

<html>
	<head>
		<meta charset="UTF-8">
		<title>浮动</title>
		<style type="text/css">
		#one
			width: 200px;
			height: 200px;
			background-color: red;
			float: right;
			
		#two
			width: 300px;
			height: 300px;
			background-color: blue;
		
		#three
			width: 200px;
			height: 200px;
			background-color: green;
			float: right;
		
		</sty

以上是关于CSS基础01 - HTML页面嵌套使用CSS的三种方式的主要内容,如果未能解决你的问题,请参考以下文章

Web前端-CSS基础与应用

CSS笔记--- CSS概述;HTML引入CSS样式的三种方式;列表样式;绝对定位

CSS基础知识总结之css样式引用的三种方式

一站式服务!图片+代码-构建移动版旅游网站页面

一站式服务!图片+代码-构建移动版旅游网站页面

python第五十天 (HTML, CSS)