PHP基础学习第六篇（初识CSS）

最新推荐文章于 2024-04-14 21:16:53 发布

XM..

最新推荐文章于 2024-04-14 21:16:53 发布

阅读量651

点赞数 1

分类专栏： HTML 文章标签： css

本文链接：https://blog.csdn.net/xiaomoge__/article/details/126875191

版权

HTML 专栏收录该内容

12 篇文章 3 订阅

订阅专栏

一、什么是CSS？

CSS是层叠样式表（Cascading Style Sheets）

样式可定义HTML元素的显示效果

样式通常储存在样式表中

使用外部样式表可以极大提高工作效率，外部样式表通常存储在CSS文件中

多个样式定义可层叠为一个

二、CSS语法

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

h1{color:blue;font-size:16px;}

h1：选择器

color、font-size：属性

blue、16px：值

选择器通常是需要改变样式的HTML元素

每条声明由一个属性和一个值组成

属性是希望设置的样式属性。每个属性有一个值，多个属性和值被冒号分开。

**CSS注释：CSS注释以/开始，以/结束**

/*这是个注释*/

text-align:center;/*这是另一个注释*/

color:black;

font-family:arial;

}

CSS选择器：CSS提供id和class两种选择器

id选择器：id选择器可以为标有特定id的HTML元素指定样式，HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义。

以下的样式规则应用于元素属性id="part1":

#part1

{text-align:center;

color:red;}

class选择器：选择器用于描述一组元素的样式，class选择器有别于id选择器的是可以在多个元素中使用。

class选择器在HTML中以class属性表示，在CSS中，类选择器以一个点“.”号显示，在以下的例子中，所拥有center类的HTML元素均为居中。

.center {text-align:center;}

可以指定特定的HTML元素使用class。

令所有的p元素使用class="center"让该元素的文本居中：

p.center {text-align:center;}

CSS样式表

样式表有三种：外部样式表（External style sheet）、内部样式表（Internal style sheet）、内联样式（Inline style）

当样式需要应用于很多页面时，可使用外部样式表。通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。

<link>标签在头部：

<head>

</head>

外部样式表以.css扩展名保存：

hr {color:sienna;}

p {margin-left:20px;}

body {background-color:blue;}

当单个文档需要特殊的样式设计，可使用内部样式表，<style>标签在文档头部定义内部样式表：

<head>

<style>

hr {color:sienna;}

p {margin-left:20px;}

body {background-color:blue;}

</style>

</head>

内联样式会要将表现和内容混杂在一起，会损失掉样式表的许多优势，需要谨慎使用。

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式优先级

（内联样式）>（内部样式）>（外部样式）>游览器默认样式

代码效果如下：

代码

<!DOCTYPE html>
<html>
     <head>
	    
		<title>CSS</title>
		<link rel="stylesheet" type="text/css" href="实验3.css">
		<style>
		
		h1                  /*内部样式设计*/
		{
		    color:blue;     /*颜色=蓝色*/
		    font-size:30px; /*字体大小=30px*/
		}
		#xm                /*ID选择器*/
		{
		    width:400px;
		    text-align:center;/*文字水平对齐居中*/
		    color:red;        /*颜色=红色*/
		}
		.xiaomo          /*class选择器*/
		{
		    text-align:center;
		    color:green;/*颜色=绿色*/
		}
		p.right/*只对<p>起作用*/
		{
		    text-align:right;
		    color:blue;
		}
		</style>
		
		
	 </head>
	 <body>
	    <h1>语法、选择器与样式表</h1>
		<div id="xm">这是一个ID选择器</div>
		<div class="xiaomo">标题居中</div>
		<h1 class="xiaomo">区块居中</h1>
		<p class="right">最右蓝色</p>
		<div class="ha">外部样式表</div>
		
	 </body>
</html>

外联样式代码：千万记得把文件后缀改为.css