阅读模式:

CSS叠层样式表

阅读量:15  一键切换:繁體   HtmlCss  发布时间:来源:知识库  
内容摘要:font-family //字体系列font-size //字体大小font-weight //字体粗细 100~900font-style //文本风格 normal/italiccolor //文本颜色text-align //文本水平......

CSS叠层样式表

font-family   //字体系列

font-size  //字体大小

font-weight  //字体粗细 100~900

font-style  //文本风格 normal/italic

color //文本颜色

text-align  //文本水平对齐

text-decoration  //无装饰/下划线/上划线/删除线 none/underline/overline/line-through

text-indent  //首行缩进 单位px/em/……

line-height  //行间距(行高)

1.CSS简介

1.1 HTML的局限性

HTML只关注内容的语义

1.2 CSS--网页的美容师

CSS 是 层叠样式表(Cascading Style Sheets) 的简称。有时候也称之为 CSS样式表 或 级联样式表。

CSS 也是一种标记语言。CSS 主要用于设置 HTML 页面中的 文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等) 以及 版面的布局 和 外观显示样式。

CSS最大价值:由 HTML 专注做结构,CSS 专注做样式,即 结构与样式 分离。

1.3 语法规范

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

<title></title><!--样式写在title标签下面--> <style> p { /*选择p标签*/ color: red; /*颜色为红色*/ font-size: 20px; /*字号大小为20像素*/ } </style> </head><!--样式写在在head结束标签上面--> <body> <p>这是一段话。</p> </body> </html>

<!--紧凑格式--> h1 { color: red; font-size: 20px; } <!--展开格式 推荐--> h1 { color: red; font-size: 20px; }

2. 样式大小写

<!--大写-->
H1 {
	COLOR: RED;
}

<!--小写 推荐-->
h1 {
	color: red;
}

3. 空格规范

 属性值面前,冒号后面,保留一个空格。

选择器(标签)和大括号中间保留空格。


2. CSS基础选择器

2.1 CSS选择器作用

根据不同需求把不同标签选出来就是选择器的作用。简单来说,就是选择标签用的。

2.2 选择器分类

选择器分为 基础选择器 和 复合选择器 两大类。

基础选择器是由单个选择器组成的。基础选择器又包括:标签选择器、类选择器、id选择器 和 通配符选择器。

2.3 标签选择器

标签选择器(元素选择器)是指用HTML标签名称作为选择器。

<style>
  p {
  	color: red;
  }
  div {
  	color: blue;
  }
</style>
</head>
<body>
	<p>我是p标签</p>
	<p>我是红色</p>
	<div>我是div</div>
	<div>我是蓝色</div>
</body>

优点:快速设置同标签样式

缺点:同标签不能分别设置样式 (可使用下方的类选择器)

2.4 类选择器

如果要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器。

第一步:使用class设置一个类名。

第二步:使用这个类名。格式为 "." 加类名。

	<style>
		.plum {
			color: #f1939c;
		}
		.orchid {
			color: #c08eaf;
		}
		.bamboo {
			color: #b9dec9;
		}
		.daisy {
			color: #e9ddb6;
		}
	</style>


<ul>
  <li class="plum">梅花</li>
  <li class="orchid">兰花</li>
  <li class="bamboo">竹</li>
  <li class="daisy">菊花</li>
</ul>

<style> .red { color: red; } .font35 { font-size: 35px; } </style> <p class="red font35">Arthur</p>

2.5 id选择器

第一步:使用 id 设置一个 id名 。

第二步:使用这个 id名 。格式为 "#" 加 id名 。

	<style>
		#ch {
			color: red;
		}
	</style>

<p id="ch">中国</p>

 

	<style>
		* {
			color: red;
		}
	</style>

<div>
  <p>p标签</p>
</div>
<ul>
  <li>无序列表</li>
</ul>

 


3.CSS字体属性

CSS Fonts(字体)属性用于定义字体系列、大小、粗细 和 文字样式(如斜体)。

3.1 字体系列

CSS 使用 font-family 属性定义文本的字体系列。【font-family字体系列】

	<style>
		h4 {
			font-family: 'Microsoft YaHei';
		}
		p {
			font-family: '宋体', Arial, Helvetica;
		}
	</style>

<h4>石灰吟</h4>
<p>千锤万凿出深山,烈火焚烧若等闲。</p>
<p>粉骨碎身浑不怕,要留清白在人间。</p>

注意:

1. 各种字体用逗号隔开,上方p标签多种字体执行顺序为:先找宋体,没有的话找Arial字体,以此类推。

2. 中文或多个单词组成的字体,加引号。

3. 尽量使用用户系统都有的字体,保证不同电脑正常显示

4. 常见字体:body { font-family: 'Micorsoft YaHei', tahoma, arial, 'Hiragion Sans GB'; }

3.2 字体大小

CSS 使用 font-size 属性定义字体大小。

px(像素) 是网页常用单位。谷歌浏览器默认16px,不同浏览器默认字号不一样,尽量给一个明确的大小,一般给body设置字号。

	<style>
		body {
			font-size: 16px;
		}
	</style>

<h1>石灰吟</h1>
<p>千锤万凿出深山,烈火焚烧若等闲。</p>
<p>粉骨碎身浑不怕,要留清白在人间。</p>

注意:h标签不受影响,需要额外设置大小

3.3 字体粗细

font-weight: normal/bold/bolder/lighter/number

normal:正常字体

bold:粗体

bolder:特粗体

lighter:细体

number:100/200/……/800/900  ,400等同normal,700等同bold(一些值不起作用是因为大部分字体没有设计9套粗细字体)

	<style>
		body {
			font-weight: 900;
		}
	</style>

<h1>石灰吟</h1>
<p>千锤万凿出深山,烈火焚烧若等闲。</p>
<p>粉骨碎身浑不怕,要留清白在人间。</p>

3.4 文字样式

CSS使用 font-style 属性设置文本的风格。

font-style:normal/italic

normal:默认值,标准字体样式

italic:斜体字体样式

	<style>
		body {
			font-style: italic;
		}
		em {
			font-style: normal;
		}
	</style>

<h1>石灰吟</h1>
<p>千锤万凿出深山,烈火焚烧若等闲。</p>
<p>粉骨碎身浑不怕,要留清白在人间。</p>
<em>不倾斜</em>

3.5 字体复合属性

<style>
  body{
      font:font-style font-weight font-size/line-height font-family;
  }
</style>
	<style>
		body {
			/*倾斜、粗细700 字号16px/行高20px 字体宋体*/
			font: italic 700 16px/20px '宋体';
		}
	</style>

<h1>石灰吟</h1>
<p>千锤万凿出深山,烈火焚烧若等闲。</p>
<p>粉骨碎身浑不怕,要留清白在人间。</p>

 

 注意:

1. 顺序不能乱,各个属性空格隔开

2. 不需要的属性可以省略,但必须保留 font-size 和 font-family 属性,否则 font 属性不起作用。


4.CSS文本属性

CSS Text(文本)属性 可以定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

4.1 文本颜色

color 属性用于定义文本颜色。

color属性值 示例
预定义的颜色值 red,green,blue等
十六进制 #FF0000(缩写#F00),#52C136等
RGB代码 rgb(255,255,0)或rgb(100%,100%,0%)等
	<style>
		p {
			color: red;
			color: #f00;/*#ff0000*/
			color: rgb(255, 0, 0);/*rgb(100%,0%,0%)*/
		}
	</style>

<p>这是一段文字</p>

<style> h1:nth-child(1) { text-align: left; } h1:nth-child(2) { text-align: center; } h1:nth-child(3) { text-align: right; } </style> <h1>居左默认</h1> <h1>居中</h1> <h1>居右</h1>

 4.3 装饰文本

 text-decoration 属性规定添加到文本的装饰。可以给文本添加下划线、删除线、上划线等。【装饰】

属性值 描述
none 默认,没有装饰。开发中常用来去掉a标签的下划线
underline 下划线
overline 上划线
line-through 删除线
	<style>
		p:nth-child(1) {
			text-decoration: none;
		}
		p:nth-child(2) {
			text-decoration: underline;
		}
		p:nth-child(3) {
			text-decoration: overline;
		}
		p:nth-child(4) {
			text-decoration: line-through;
		}
	</style>

<p>无装饰 默认</p>
<p>下划线</p>
<p>上划线</p>
<p>删除线</p>

4.4 文本缩进

text-indent属性用来指定文本的第一行的缩进,通常是将段落的首行缩进。

em是一个相对单位,就是当前元素(font-size)1个文字的大小。

	<style>
		p {
			text-indent: 2em;
		}
	</style>

<p>首金产生!7月24日,东京奥运会女子十米气步枪决赛中,中国选手杨倩以251.8环摘得金牌,创造了新的奥运会纪录。</p>
<p>决赛中杨倩第一组射击后成绩为51.9环排在并列的第五位,俄罗斯和韩国选手暂列第一。</p>

4.5 行间距

line-height属性用于设置行间距(行高)

	<style>
		p {
			line-height: 50px;
		}
	</style>

 


5.CSS引入方式

5.1 CSS的三种样式表

按照CSS样式书写的位置(或引入方式),CSS样式表可以分为三大类:

1.行内样式表(行内式)

2.内部样式表(嵌入式)

3.外部样式表(链接式)

5.2内部样式表

内部样式表(内嵌样式表)式写到html页面内部,是将所有CSS代码抽取出来,单独放到<style>标签中。

	<title></title> 
	<style>
		p {
			color: red;
		}
	</style>
</head>
<body>
	<p>内部样式表/内嵌样式表</p>
</body>

5.3 行内样式表

行内样式表(内联样式表)是在元素标签内部的style属性中设定CSS样式。适合于修改简单样式。

<p style="color: red;">内容<p>

5.4 外部样式表

实际开发常用,能让多个页面使用样式表,适合样式比较多的情况。单独写到CSS文件中,再把CSS文件引入HTML页面中使用

引入外部样式表分为两步:

1. 新建一个后缀名为.css的样式文件,把所有CSS代码都放入此文件中。

2. 在HTML页面中,使用<lilnk>标签引入这个CSS文件。

<link rel="stylesheet" href="CSS文件路径">

rel:定义当前文档与被链接文档之间的关系,在这里需要指定为"stylesheet",表示被链接的文档时一个样式表。

练习案例:新闻页面

CSS
body {
    font: 16px/28px 'Microsoft YaHei';
}
h1 {
    font-weight: 400;
    text-align: center;
}
a {
    text-decoration: none;
}
.gray {
    color: #888;
    font-size: 12px;
    text-align: center;
    border-bottom: 1px solid #888;
}
.search {
    color: #666;
    width: 170px;
}
.btn {
    font-weight: 700;
}
p {
    text-indent: 2em;
}
.pic {
    text-align: center;
}
.pic img {
    border: 1px solid black;
}
.footer {
    color: #888;
    font-size: 12px;
}

HTML

<h1>奥林匹克运动会</h1>
<div class="gray">
  2021-8-1 16:30:47 来源:<a href="#">百度百科</a> 
  <input class="search" type="text" placeholder="请输入查询条件"> <button class="btn">搜索</button>
</div>
<p>奥林匹克运动会(希腊语:Ολυμπιακοί Αγώνες;法语:Jeux olympiques;英语:Olympic Games;中文简称“奥运会”)。</p>
<p>是国际奥林匹克委员会主办的世界规模最大的综合性运动会,每四年一届,会期不超过16日,是世界上影响力最大的体育盛会。</p>
<h4>奥运会简介</h4>
<p class="pic"><img src="./images/OG.jpg"></p>
<p>奥运会分为夏季奥林匹克运动会、夏季残疾人奥林匹克运动会、冬季奥林匹克运动会、冬季残疾人奥林匹克运动会、夏季青年奥林匹克运动会、冬季青年奥林匹克运动会、世界夏季特殊奥林匹克运动会、世界冬季特殊奥林匹克运动会、夏季聋人奥林匹克运动会、冬季聋人奥林匹克运动会十个项目组成。</p>
<p>奥运会中,各个国家和地区用运动交流各国文化,以及切磋体育技能,其目的是为了鼓励人们不断进行体育运动。</p>
<p class="footer">文本来源:百度百科 责任编辑:网友</p>
分享到:
首页桂ICP备2022000863号分类地图学习工具教育专题当前时间:本站内容只用于学习和交流,如有牵扯版权问题请联系站长邮箱: