CSS入门知识汇总

fasss 发布于2019-04-23 11:41 / 3079人阅读

摘要：而三大部分又是由来编写组成的结构样式行为的概念及作用是层叠样式表的缩写，简称样式表。提高网站在百度或中的排名内容能被更广泛的设备所访问。

1.CSS认识

在谈论CSS的概念之前，我们先说一说web标准的目的——其在于创建一个统一的用于web表现层的技术标准，以便通过不同浏览器或终端设备向最终用户展示信息内容。一个网页的呈现是由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。

而三大部分又是由html、css、js来编写组成的：

结构	HTML
样式	CSS
行为	JS

1.1 CSS的概念及作用

CSS是(Cascading Style Sheets)层叠样式表的缩写，简称样式表。

网页设计者使用CSS可以定义元素的样式，包括字体，颜色及其它的高级样式。

采用CSS样式的优点：

1. 提高页面浏览速度。使用CSS方法，比传统的web设计方法至少节约50%以上的大小。

2. 缩短改版时间，将表现与内容相分离。只要简单的修改几个CSS文件就可以重新设计一个有成千上万个网页。

3.降低网站流量的费用。带宽要求降低(代码更简洁),成本更低

4.联想容易被搜寻引擎搜索到。提高网站在百度或google中的排名

5.内容能被更广泛的设备所访问。包括屏幕阅读机，手持设备等。

1.2 CSS的三种基本写法

语法简单说明如下：

单个样式：

样式属性名：样式属性值 ; 比如 color:red;

多个样式：

样式属性名：样式属性值 ; 样式属性名：样式属性值 ;

比如 color:red;font-size:120px;

注意：

1.属性值不需要使用引号括起来，除非属性值是由多个单词组成，如：font-family: "sans serif"；

2.有的属性可以指定多个属性值，多个属性值间以“,”隔开；

3.当定义多个值时，浏览器按照从前向后顺序选择属性值。如果第1个值有效，则尝试使用，如果第1个无效，则使用第2个，依次类推。

①写法一：在标签中的style属性中直接写样式

1 
2 <div style="color: red;font-weight: bold;font-style: italic;font-family:楷体;">叠层样式表div>

②写法二：在style标签内书写样式，标签可以放在页面的任何位置；推荐写在head、body中

 1 <head>
 2 <meta charset="UTF-8">
 3 <title>Insert title heretitle>
 4 
 5 <style type="text/css">
 6 div {  
 7     color: red;
 8     font-weight: bold;
 9     font-style: italic;
10     font-family:楷体;
11 }
12 style>
13 head>
14 <body>
15 <div>叠层样式表div>
16 body>

③写法三：外部引入样式，实际项目中应用最多，使用link标签进行.css文件外部引用

 1 <head>
 2 <meta charset="UTF-8">
 3 <title>Insert title heretitle>
 4 
 5 <link rel="stylesheet" href="./css/02-css.css">
 6 head>
 7 <body>
 8 
 9 <div>叠层样式表div>
10 body>

.css文件中写入选择器对应的样式列表，如下：

1 @CHARSET "UTF-8";
2 div {
3     color: red;
4     font-weight: bold;
5     font-style: italic;
6     font-family:楷体;
7 }

2.CSS选择器

2.1基本选择器

CSS基本选择器比较简单，主要分为：通用选择器、标签选择器、类选择器、ID选择器四大类。直接上代码看一下就懂了：

 1 <head>
 2 <meta charset="UTF-8">
 3 <title>Insert title heretitle>
 4 <style type="text/css">
 5 /* 1.通用选择器
 6 *{  
 7     color: red;
 8     font-weight: bold;
 9     font-style: italic;
10     font-family:楷体;
11 } */
12 /* 2.标签选择器
13 span{  
14     color: red;
15     font-weight: bold;
16     font-style: italic;
17     font-family:楷体;
18 } */
19 /* 3.类选择器
20  .spanstyle{
21     color: red;
22     font-weight: bold;
23     font-style: italic;
24     font-family:楷体;
25 } */
26 /* 4.ID选择器
27 #id1{
28     color: red;
29     font-weight: bold;
30     font-style: italic;
31     font-family:楷体;
32 } */
33 style>
34 head>
35 <body>
36 
41 <div>div样式div>
42 <span class="spanstyle">span样式span>
43 <a id="id1">a超链接样式a>
44 body>

2.2其他选择器

CSS其他选择器主要有：多元素选择器、后代选择器、子元素选择器、相邻元素选择器、属性选择器这五大类，具体还是看代码：

 1 <head>
 2 <meta charset="UTF-8">
 3 <title>Insert title heretitle>
 4 <style type="text/css">
 5 /*1.多元素选择器 
 6 div,span,a{
 7     color: red;
 8     font-weight: bold;
 9     font-style: italic;
10     font-family:楷体;
11 } */
12 /*2.后代选择器
13  #intro p{
14     color: red;
15     font-weight: bold;
16     font-style: italic;
17     font-family:楷体;
18 }*/
19 /*3.子元素选择器
20  #intro > p > span {
21     color: red;
22     font-weight: bold;
23     font-style: italic;
24     font-family:楷体;
25 }*/
26 /*4.相邻元素选择器
27 span + p {
28     color: red;
29     font-weight: bold;
30     font-style: italic;
31     font-family:楷体;
32 }*/
33 /*5.属性选择器
34 a[target]{
35     color: red;
36     font-weight: bold;
37     font-style: italic;
38     font-family:楷体;
39 }
40 a[target=_blank]{
41     color: red;
42     font-weight: bold;
43     font-style: italic;
44     font-family:楷体;
45 } */
46 style>
47 head>
48 <body>
49 
55 <div>div样式div>
56 <span class="spanstyle">span样式span>
57 <p>p1标签样式p>
58 <a id="id1">a超链接样式a>
59 <div id="intro">
60     <p>
61         我是大p<br>
62         <span>我是大p里面的spanspan>
63     p>
64     <p>我是小pp>
65 div>
66 <span class="spanstyle">span样式span>
67 <p>p2标签样式p>
68 <a href="http://www.baidu.com" target="_blank">baidu.coma><br>
69 <a href="http://www.taobao.com" target="_top">taobao.coma>
70 body>

另外独立来说一说伪类选择器，CSS伪类选择器主要用于某些选择器添加特殊的效果。主要在支持CSS的浏览器上对链接的不同状态以不同的方式显示。这些状态包括：活动状态（active），已被访问状态(visited)，未被访问状态(link)，和鼠标悬停状态(hover)。

1 a:link {color: #FF0000}        /* 未访问的链接 */
2 a:visited {color: #00FF00}    /* 已访问的链接 */
3 a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
4 a:active {color: #0000FF}    /* 选定的链接 */

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

提示：伪类名称对大小写不敏感。

下面以一个a:hover的例子来解释一下伪类选择器的作用：

 1 <head>
 2 <meta charset="UTF-8">
 3 <title>Insert title heretitle>
 4 <style type="text/css">
 5 /*将所有的a标签的状态都修改成下面这样*/
 6 a{
 7     color:black;        
 8     text-decoration: none;  /*不显示下划线*/
 9 }
10 /*当鼠标移上来的状态我们进行多带带的修改*/
11 a:hover{
12     color:red;
13     text-decoration: underline;
14     font-size:30px;
15 }
16 style>
17 head>
18 <body>
19 
25 <a href="www.baidu.com">百度网址a>
26 body>

显示效果如下：

更多CSS伪类知识可以参考：http://www.w3school.com.cn/css/css_pseudo_classes.asp

3. CSS的优先级

CSS样式是有优先级的，具体的样式优先级（渲染顺序）如下：

!important > 行内样式 > id选择器 > 类选择器 > 标签选择器，在选择器优先级（先看优先级）相同的情况下，参照就近原则，具体示例如下代码：

 1 <head>
 2 <meta charset="UTF-8">
 3 <title>Insert title heretitle>
 4 
 6 <style type="text/css">
 7 /* div{
 8     color:red !important;
 9 } */
10 /* #divId{
11     color:green;
12 } */
13 .divClass{
14     color: yellow;
15 } 
16 div{
17     color: orange;
18 }
19 div{
20     color:black;
21 }
22 style>
23 head>
24 <body>
25 <div id="divId" class="divClass" style="color: blue;">我被渲染了div>
26 body>

4.CSS的继承性

HTML文档以树形结构进行组织，各元素之间是一种层次关系，这种层次关系同样反映在样式表的应用中。具有层次关系的元素之间，内层元素将继承外层元素的样式，多个外层元素中定义的样式将叠加到内层元素。

HTML中，是其他元素的容器，是其他元素的最外层元素，所以元素中定义的样式将影响其他所有元素的显示格式。

具体示例如下：

 1 <head>
 2 <meta charset="UTF-8">
 3 <title>Insert title heretitle>
 4 
 5 <style type="text/css">
 6 .divclass{
 7     color: blue;
 8     border-width:1px;
 9      border-style:solid;
10     border-color:red;
11 }
12 style>
13 head>
14 <body>
15 
21 <div style="color: blue;border: 1px solid red">
22     <p>字体变红p>
23 div>
24 <div class="divclass">
25     <p>字体变红p>
26 div>
27 body>

具有继承的CSS属性：

说明

对应属性

文本相关的属性是继承的

text-align、color、text-indent、font-family、font-size、

font-style、font-weight、 letter-spacing、word-spacing、

text-transform、line-height等

列表相关的属性是继承的(ul,ol,li)

list-style、 list-style-image、list-style-position、list-style-type

5.更多CSS

本文只列出了本人作为web开发时常用的CSS知识入门进行系统总结，不包含CSS3等特定CSS知识，更多文档及官方知识库请链接w3school官网：

http://www.w3school.com.cn/cssref/index.asp

GPU云服务器云服务器 css入门 css快速入门 css入门到精通 css入门教程

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

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

前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
关于sass、scss、less的概念性知识汇总

摘要：而使用预处理器，提供缺失的样式层复用机制减少冗余代码，提高样式代码的可维护性。所以我们在实际项目中衡量预编译方案时，还是得想想，比起带来的额外维护开销，预处理器有没有解决更大的麻烦。也是成熟的预处理器之一，而且有一个稳定，强大的团队在维护。这篇文章主要解答以下几个问题，供前端开发者的新手参考。 1、什么是Sass和Less？ 2、为什么要使用CSS预处理器？ 3、Sass和Less的...

HmyBmny 2019-08-29 16:24 评论0 收藏0
关于sass、scss、less的概念性知识汇总

摘要：而使用预处理器，提供缺失的样式层复用机制减少冗余代码，提高样式代码的可维护性。所以我们在实际项目中衡量预编译方案时，还是得想想，比起带来的额外维护开销，预处理器有没有解决更大的麻烦。也是成熟的预处理器之一，而且有一个稳定，强大的团队在维护。这篇文章主要解答以下几个问题，供前端开发者的新手参考。 1、什么是Sass和Less？ 2、为什么要使用CSS预处理器？ 3、Sass和Less的...

xuweijian 2019-08-02 11:15 评论0 收藏0
前端性能优化知识点汇总

摘要：面试必谈的前端性能优化为什么做优化提供给用户最佳体验有哪些差的体验白屏好久才显示内容浪费用户流量优化方案大概分为以下几种降低请求数量减少获取数据的接口数初始数据尽量通过一个接口返回减少的数量提取公共利用缓存减少后续加载访问。面试必谈的--前端性能优化为什么做优化提供给用户最佳体验 #有哪些差的体验 - 白屏好久才显示内容 - h5浪费用户流量优化方案大概分为以下几种： 1、降低...

quietin 2019-08-30 13:59 评论0 收藏0
前端性能优化知识点汇总

摘要：面试必谈的前端性能优化为什么做优化提供给用户最佳体验有哪些差的体验白屏好久才显示内容浪费用户流量优化方案大概分为以下几种降低请求数量减少获取数据的接口数初始数据尽量通过一个接口返回减少的数量提取公共利用缓存减少后续加载访问。面试必谈的--前端性能优化为什么做优化提供给用户最佳体验 #有哪些差的体验 - 白屏好久才显示内容 - h5浪费用户流量优化方案大概分为以下几种： 1、降低...

ChanceWong 2019-08-26 11:48 评论0 收藏0
前端性能优化知识点汇总

摘要：面试必谈的前端性能优化为什么做优化提供给用户最佳体验有哪些差的体验白屏好久才显示内容浪费用户流量优化方案大概分为以下几种降低请求数量减少获取数据的接口数初始数据尽量通过一个接口返回减少的数量提取公共利用缓存减少后续加载访问。面试必谈的--前端性能优化为什么做优化提供给用户最佳体验 #有哪些差的体验 - 白屏好久才显示内容 - h5浪费用户流量优化方案大概分为以下几种： 1、降低...

CarterLi 2019-08-01 18:38 评论0 收藏0