广州北大青鸟计算机职业培训学校
互联网技术培训、软件技术培训、大数据培训、云计算培训、数据分析培训信息网
当前位置:网站首页 > 软件专业 > 前端开发专业 > 正文

Web前端开发|如何使用CSS?_惠州前端培训学校

作者:hz_admin01发布时间:2022-04-11分类:前端开发专业浏览:756


导读:Web前端开发|如何使用CSS?下面惠州北大青鸟老师给大家分享一下,希望对大家有帮助。

Web前端开发|如何使用CSS?下面惠州北大青鸟老师给大家分享一下,希望对大家有帮助。

一、与HTML的结合方式

CSS与HTML的结合方式一共有三种,分别是:外部样式、内部样式和内联样式。

①外部样式

当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。<link>标签在文档的头部:

<head>   

<link rel="stylesheet"href="main.css"/>

</head>

或者可以像下面这样在<style>标签import一个样式表,不过不建议使用。

<head> 

 <style>       

@import "main.css";   

</style>

</head>

②内部样式

当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用<style>标签在文档头部定义内部样式表,就像这样:

<head>   

<style>      

 hr {color: sienna;}   

</style>

</head>

③内联样式

要使用内联样式,你需要在相关的标签内使用样式(style)属性。

<p style="color:sienna">   

This is a paragraph

</p>

由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。

二、CSS语法

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

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

每条声明由一个属性和一个值组成。两条声明之间被分号分开。

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

在下面这个例子中,h1是选择器,color和font-size是属性,red和14px是值。


三、选择器

CSS的选择器主要分为两大类,一类基本选择器;一类扩展选择器。

①基本选择器

基本选择器包括id选择器,元素选择器和类选择器。

id选择器可以为标有特定id的HTML元素指定特定的样式。id选择器以"#"来定义。例如下面代码指定id为red的标签中文本为红色。

#red{color:red; }

元素选择器可以为相应的HTML元素指定特定的样式。元素选择器前面没有任何字符。例如下面代码指定div标签中文本为红色。

div{color:red; }

类选择器可以为标有特定class的HTML元素指定特定的样式。类选择器以一个点号显示。例如下面代码指定class为center的标签中文本居中对齐。

.center {text-align: center }

②扩展选择器

扩展选择器是在基本选择器的基础上扩展出来的,下面介绍几种常见的。

*选择器(* {})可以为HTML的所有元素指定特定的样式。例如下面代码指定HTML页面中所有文本为红色。

* {color:red; }

并集选择器(选择器1,选择器2{})可以为多个选择器指定特定的样式。例如下面代码指定div和span两种标签中文本为红色。

div,span{color:red; }

子选择器(选择器1选择器2{})可以为选择器1中的选择器2指定特定的样式。例如下面代码指定div中span标签文本为红色。

divspan{color:red; }

父选择器(选择器1>选择器2{})可以为含有选择器2的选择器1指定特定的样式。例如下面代码指定含有span的div标签文本为红色。

div>span{color:red; }

属性选择器(元素[属性="属性值"])可以为含有该属性且属性值等于该值的元素指定特定的样式。其中,元素和属性值可以省略。例如下面代码指定align属性等于center的div标签文本为红色。

div[align="center"] {color:red; }

伪类选择器(元素:状态{})可以为该元素处于该状态时指定特定的样式。例如下面的代码指定鼠标悬浮在超链接上时文本为红色。

a:hover {color:red; }

四、盒子模型

所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型:


Margin(外边距) -清除边框外的区域,外边距是透明的。

Border(边框) -围绕在内边距和内容外的边框。

Padding(内边距) -清除内容周围的区域,内边距是透明的。

Content(内容) -盒子的内容,显示文本和图像。

默认情况下,标签的width和height属性指的是content(内容)的宽和高,我们在设置边框和边距的时候一定要注意。如果想要让width和height是最终盒子的大小,可以设置下面的代码:

box-sizing:border-box;

更多前端资讯关注网站动态,或者来惠州北大青鸟新方舟校区了解一下。

标签:惠州前端培训学校惠州前端基础惠州前端培训北大青鸟IT计算机学校北大青鸟IT软件学校前端北大青鸟IT学校惠州北大青鸟北大青鸟


前端开发专业排行
标签列表
网站分类
文章归档
最近发表