认识CSS样式

番茄西红柿发布于2019-04-23 13:19 / 497人阅读

摘要：声明在英文大括号中的的就是声明，属性和值之间用英文冒号分隔。嵌入式样式慕课网，超酷的互联网技术免费学习平台，创新的网络一站式学习实践体验服务及时贴心，内容专业有趣易学。

6-2 css样式的优点

　　为什么使用css样式来设置网页的外观样式呢？右边编辑器是一段文字，我们想把“超酷的互联网”、“服务及时贴心”、“有趣易学”这三个短语的文本颜色设置为红色，这时就可以通过设置样式来设置，而且只需要编写一条css样式语句。

第一步：把这三个短语用括起来。（见右边代码编辑器13行）

第二步：写入下列代码：（见右边代码编辑器7-8行）

span{
    color:red;
}

观察结果窗口文字的颜色是否变为红色了

 1 DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>CSS样式的优势title>
 6 <style type="text/css">
 7 span{
 8    color:blue;
 9 }
10 style>
11 head>
12 <body>
13     <p>慕课网，<span>超酷的互联网span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；<span>服务及时贴心span>，内容专业、<span>有趣易学span>。专注服务互联网工程师快速成为技术高手！p>
14 body>
15 html>

View Code

6-3 css 代码语法

css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：

选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。

声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：

p{font-size:12px;color:red;}

注意：

1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。

2、为了使用样式更加容易阅读，可以将每条代码写在一个新行内，如下所示：

p{
   font-size:12px;
   color:red;
}

 1 DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>CSS代码语法title>
 6 <style type="text/css">
 7 p{
 8    font-size:12px;
 9    color:red;
10    font-weight:bold;
11 }
12 style>
13 head>
14 <body>
15 <p>慕课网，超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！p>
16 body>
17 html>

CSS代码语法

6-4 CSS注释代码

在Html的注释一样，在CSS中也有注释语句：用/*注释语句*/来标明（Html中使用)。就像下面代码：

 1 DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>CSS注释代码title>
 6 <style type="text/css">
 7 p{
 8    font-size:12px;/*设置文字字号为12px*/
 9    color:red;/*设置文字颜色为红色*/
10 }
11 style>
12 head>
13 <body>
14 <p>慕课网，超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！p>
15 body>
16 html>

注释代码

6-5 内联式css样式，直接写在现有的HTML标签中

现在有一任务，把右侧编辑器中的“超酷的互联网”、“服务及时贴心”、“有趣易学”这三个短词文字字号修改为18px。如果用上节课我们学习的内联式css样式的方法进行设置将是一件很头疼的事情（为每一个标签加入sytle="font-size:18px"语句），本小节讲解一种新的方法嵌入式css样式来实现这个任务。

嵌入式css样式，就是可以把css样式代码写在标签之间。如下面代码实现把三个标签中的文字设置为红色：

嵌入式css样式必须写在之间，并且一般情况下嵌入式css样式写在之间。如右边编辑器中的代码。

 1 DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>嵌入式css样式title>
 6 <style type="text/css">
 7 span{
 8    color:blue;
 9 }
10 style>
11 head>
12 <body>
13     <p>慕课网，<span>超酷的互联网span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；<span>服务及时贴心span>，内容专业、<span>有趣易学span>。专注服务互联网工程师快速成为技术高手！p>
14 body>
15 html>

View Code

6-6

外部式css样式(也可称为外联式)就是把css代码写一个多带带的外部文件中，这个css样式文件以“.css”为扩展名，在内（不是在代码的前面（实际开发中也是这么写的）。感兴趣的小伙伴可以试一下，把它们调换顺序，再看他们的优先级是否变化。

其实总结来说，就是--就近原则（离被设置元素越近优先级别越高）。

 1 DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>嵌入式css样式title>
 6 <link href="style.css" rel="stylesheet" type="text/css">
 7 <style type="text/css">
 8 span{
 9    color:red;
10 }
11 style>
12 head>
13 <body>
14     <p>慕课网，<span style="color:pink">超酷的互联网span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！p>
15 body>
16 html>

View Code

GPU云服务器云服务器 css样式页面css样式 css的样式 css样式代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1727.html

深入新版BS4源码探索flex和工程化sass奥秘

摘要：这个接受三个参数表示栅格数目默认为默认为表示断点设置，这是一个全局变量，为类型。你可能已经听说了一个大新闻：Bootstrap4 合并了代号为#21389的PR，宣布放弃支持IE9，并默认使用flexbox弹性盒模型。这标志着：1）前端开发全面步入现代浏览器的时代进一步来临；2）样式处理也再一次面向未来，拥抱更加灵活的弹性盒模型－Flex布局。这篇文章会带你深入Bootstrap最...

evin2016 2019-08-21 11:30 评论0 收藏0
深入新版BS4源码探索flex和工程化sass奥秘

摘要：这个接受三个参数表示栅格数目默认为默认为表示断点设置，这是一个全局变量，为类型。你可能已经听说了一个大新闻：Bootstrap4 合并了代号为#21389的PR，宣布放弃支持IE9，并默认使用flexbox弹性盒模型。这标志着：1）前端开发全面步入现代浏览器的时代进一步来临；2）样式处理也再一次面向未来，拥抱更加灵活的弹性盒模型－Flex布局。这篇文章会带你深入Bootstrap最...

silencezwm 2019-08-30 15:52 评论0 收藏0
深入新版BS4源码探索flex和工程化sass奥秘

摘要：这个接受三个参数表示栅格数目默认为默认为表示断点设置，这是一个全局变量，为类型。你可能已经听说了一个大新闻：Bootstrap4 合并了代号为#21389的PR，宣布放弃支持IE9，并默认使用flexbox弹性盒模型。这标志着：1）前端开发全面步入现代浏览器的时代进一步来临；2）样式处理也再一次面向未来，拥抱更加灵活的弹性盒模型－Flex布局。这篇文章会带你深入Bootstrap最...

Enlightenment 2019-08-01 16:16 评论0 收藏0
CSS核心技术详解-核心概念

摘要：每个页面只可能有一个可是窗口，并提供滚动条机制，但是可以嵌入多个页面包含块重点强调这只是一个概念元素的位置和尺寸都相对于一个父元素矩形那么这个矩形就是一个包含块。 CSS解析规则对空格不敏感，因此每个样式后面都加一个分号，不然会把后面的css当做整体解析，直到遇到分号为止最后一个属性的分号是可以不加的当遇见不认识的属性或属性值的时候，将忽略此属性继续解析后面的属性,浏览器只会解析认识...

Eastboat 2019-05-23 17:34 评论0 收藏0
切图崽的自我修养－合理组织CSS结构

摘要：前言不要再叫我切图崽，我很生气，这样很不礼貌，请叫我前端工程师从方面来说，前端工程师和切图崽的区别，并不是指写单条技巧的高低，甚至很多工程师在一些的奇技淫巧都比不上切图崽那切图崽到底和工程师之间的差别是什么呢差别是年工作经验视野，是格局，是前言不要再叫我切图崽，我很生气，这样很不礼貌，请叫我前！端！工！程！师！从css方面来说，前端工程师和切图崽的区别，并不是指写单条css技巧的...

cangck_X 2019-08-29 10:57 评论0 收藏0