13518219792
今天小编要跟大家分享的文章是关于Web前端开发知识点之CSS的使用方式。本文章小编从与HTML的结合方式、CSS语法、选择器以及盒子模型四个方面进行讲解。下面来和小编一起看一看吧！
我们提供的服务有：网站设计制作、成都做网站、微信公众号开发、网站优化、网站认证、张家川回族自治ssl等。为上1000+企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的张家川回族自治网站制作公司
一、与HTML的结合方式
CSS与HTML的结合方式一共有三种，分别是：外部样式、内部样式和内联样式。
①外部样式
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在文档的头部：
_
或者可以像下面这样在标签import一个样式表，不过不建议使用。
___
@import"main.css";_
②内部样式
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用标签在文档头部定义内部样式表，就像这样:
_
___
_r_color:_ienna;}_
③内联样式
要使用内联样式，你需要在相关的标签内使用样式(style)属性。
_
Thisisaparagraph
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
二、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标签文本为红色。
divspan{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;
以上就是小编今天为大家分享的关于Web前端开发知识点之CSS的使用方式的文章，希望本篇文章能够对正在从事web前端工作和学习的小伙伴们有所帮助，想要了解更多web前端知识记得关注北大青鸟web培训官网，最后祝愿小伙伴们工作顺利，城市一名优秀的web前端程序员。
文章来源：原创_绲墓适_
当浏览器阅读CSS时，它会根据CSS编排文档。有三种使用CSS方法：外部样式表(External Style Sheet) 内部样式表(Internal Style Sheet) 内联样式表(Inline Styles) 外部样式表(External Style Sheet)很多网页需要用到同样的样式时，将样式写在一个CSS文件里，然后在每个需要用到这些样式的网页里链接这个CSS文件。可以用标记把这个外部样式表链接到HTML文档。标记在HTML文档的部使用。如果你在HTML文档外部建立了一个“mystyle.css”文件，定义段落的文字的颜色为绿色：p { color: blue; }然后你可以这样使用它："/A 这个段落的文字的颜色将为绿色 浏览器将会从mystyle.css这个文件阅读样式定义，并根据它编排文档。可以用任何的文本编辑器写CSS外部样式表。在这个文件内不要包含有HTML标记。你的样式表以.css扩展名保存。以下是一个CSS文件;hr {color: sienna}p {margin-left: 20px}body {background-image: url("images/back40.gif")}不要在属性值和单位之间留下空格。如果你使用"margin-left: 20 px" 而不"margin-left: 20px"，这只会在IE6有正确的显示，在Mozilla（Firefox）或 Netscape.不能正确的显示内部样式表(Internal Style Sheet)当一个单独的文档有独一无二的样式时，使用内部样式表。在使用head部使用 这个段落的文字字体大小为20px /html浏览器将会阅读这个样式表，并根据它编排文档。注意：浏览器一般会忽视它不支持的标记，这意味着一些旧式浏览器不支持/head 内联样式表(Inline Styles)内联样式表失去了CSS的许多优点，它内容和表现混在一起，应少用。通过在相关的标记里使用style属性可以使用内联样式表。例如：这是一个段落 字体颜色为红色,字体大小为8px多项样式将会层叠成一项CSS允许不同的方式定义样式。样式可以定义在一个单独的HTML元素里面(内联样式表)，也可以定义在一个HTL页面的部(内部样式表)，或者定义在一个外部的CSS文件内。甚至在同一个HTML文档内可以引用多个外部CSS样式表(外部样式表)。层叠顺序（Cascading Order）当多于一项样式定义一个HTML元素时什么样式将会被使用？一般说来，我们可以说所有的样式将会“层叠”成一个新的样式表，它们遵从下面的优先级。（从低到高） 浏览器缺省样式表(browser default)(优先级最低) 外部样式表(Extenal Style Sheet) 内部样式表(Internal Style Sheet) 内联样式表(Inline Style)(优先级最高) 所以，一个内联的样式会覆盖过内部样式表、外部样式表和浏览器缺省样式表例如，在一个外部样式表有这样定义了：h3 {color: red; /* 字体颜色为红色 */text-align: left;/* 文本以左对齐*/font-size: 8px /* 字体大小为8px*/}而在一个内部样式表中也有这样这的定义 ：h3 {text-align: right; /* 文本以右对齐*/font-size: 20px /* 字体大小为20px */}要是这个页面使用到这个外部样式表，那么h3声明将是color: red; /* 字体颜色为红色 */text-align: right; /* 文本以右对齐*/font-size: 20px /* 字体大小为20px */Color值从外部样式表继承，text-alignment 和the font-size值从内部样式表继承
在制作一个网页的时候，Css样式的添加一共有四种方式，一起来看看这四种方式：
一、使用STYLE属性： 将STYLE属性直接加在个别的元件标签里。
元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}
例如：
TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%
这种用法的优点 是可灵巧应用样式於各标签中，但是缺点则是没有整篇文件的『统一性』。
二、使用STYLE标签： 将样式规则写在STYLE.../STYLE标签之中。
通常是将整个的 STYLE.../STYLE结构写在网页的HEAD /HEAD部份之中。这种用法的优点就是在於整篇文件的统一性，只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。
三、使用 LINK标签： 将样式规则写在.css的样式档案中，再以LINK标签引入。
假设我们把样式规则存成一个example.css的档案，我们只要在网页中加入
LINK REL=STYLESHEET TYPE="text/css" HREF="example.css"
即可套用该样式档案中所制定好的样式了。 通常是将LINK标签写在网页的head/head部份之中。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。
四、使用@import引入： 跟LINK用法很像，但必 放在STYLE.../STYLE 中。
要注意的是，行末的分号是绝对不可少的！这种方式也可以把
CSS的调用，按照CSS出现在页面的不同位置，可以分为3种方法：
元素中直接使用；
从页面头部调用；
采用链接的形式调用。
不同的调用方法有不同的写法和优先级。下面分别做一下介绍。
一、元素中直接使用
这种调用方式的写法如下：
元素名称 style="属性:属性值;"/元素名称
在样式中直接使用CSS，语法是使用style标签，在双引号中，样式的语法结构和独立样式表中完全相同。例如：
div style="width:240px;height:80px;background-color:#cccccc;text-align:center;font-size:14px"
示例：元素中直接调用。/div
该样式中定义了元素宽、高为360、80像素，背景色为灰色，字体大小为14像素。其应用到页面中的显示如图1。
二、从页面头部调用
从页面头部调用CSS是将CSS写在页面的head元素中，然后在页面中调用。其语法结构如下：
style
选择符{属性:属性值;}
/style
页面上的所有样式都可以写在style和/style中。使用这种方式调用CSS，在页面中必须有相应的调用代码。
其中，类选择符的调用代码如下：
元素名称 class="类选择符名称"/元素名称
ID选择符的调用代码如下：
元素名称 id="id 类选择符名称"/元素名称
下面我们来用一个示例演示一下。
head
titleCSS调用方法/title
style
.content{
background-color: #cccccc;
font-size: 14px;
width: 240px;
height: 80px;
color: Blue;
text-align: center;
}
/style
/head
body
div class="content"示例：从页面头部调用。/div
/body
该样式应用到页面的效果如图2所示。
三、采用链接的形式调用
采用链接的形式调用CSS通常有两种方法：
使用link元素
使用link元素调用CSS的语法如下：
link rel="stylesheet" href="css文件路径" type="text/css"/
其中rel="stylesheet"指这个link和其href之间的关联样式为样式表文件。type="text/css"指文件类型是样式表文本。
使用@import
使用@import调用和使用link元素调用的区别在于，使用@import的调用方法只能使用在样式文件中，即只能在调用的样式文件，或style元素中才能正常使用
CSS是一门指定文档该如何呈现给用户的语言。
一、CSS帮助您将文档信息的内容和如何展现它的细节相分离
创建html文档
创建样式表
在与前面相同的目录中，新建另一个文本文件。该文件将成为您的样式表。请将它命名为：style1.css
在您的CSS文件中，复制、粘贴下面的行，并保存该文件:
二、连接您的文档和样式表
为将您的文档和样式表相连，请编辑您的HTML文件。并添加下面高亮的行：
保存该文件并刷新您的浏览器。该样式表将首字母显示为红色，如下所示：
三、rel=“stylesheet”是什么意思呢
范例中呈现的是标准HTML link标签嵌入css档案的写法，其中「rel="stylesheet" type="text/css"」所代表的意思，就是告诉浏览器要导入一个在外部的css档案，透过href导入名为xxxx.css的样式档案。
