W3C三剑客——CSS快速入门

作者: 前端Q群282549184 | 来源:发表于2020-08-10 10:07 被阅读0次

W3C3剑客—CSS

万维网联盟（外语缩写：W3C）标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。

CSS3 作为变现层，其威力堪比整容。

未加样式和加了样式做对比，淘宝：

加上样式后

1.CSS该如何学习？

css的3种引入方式

CSS的选择器

CSS的基本样式

CSS几种布局方式

CSS响应式

网页动画（专业的必修，非专业的了解）

1.1什么是CSS？

Cascading Style Sheets （层叠样式表）

CSS2 W3C组织于1998年推出的技术规范

CSS3 早在2001年W3C就完成了CSS3的草案规范。CSS3规范的一个新特点是被分为若干个相互独立的模块

1.2CSS如何使用

行内式引入，通过Style属性(不推荐使用，结构与表现高度耦合难以维护)

<h1 style="color: red">CSS行内式演示</h1>

1

通过内部式Style引入

<style>

/*这是在css中的注释 */

h1{

font-size: 100px;

}

</style>

123456

外部样式表引入（推荐使用，结构与表现低耦合，方便维护）

1

在html中的位置一览

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/*这是在css中的注释内部样式*/

h1{

font-size: 100px;

}

</style>

</head>

<body>

<h1 style="color:rgb(182, 17, 17)">CSS行内式演示</h1>

</body>

</html>

1234567891011121314151617181920

样式优先级，html从上往下加载，后边的样式会覆盖先前的样式，样式变现为就近原则。

除此之外还可以在Style内通过import导入，CSS2.1特有，使用较少，可以和link进行替换

2.CSS选择器

标签选择器

层次选择器

id选择器（重点）

类选择器（重点）

伪类选择器（爱恨原则）

属性选择器（重点）

2.1标签选择器

标签选择器可以快速定位到html中的某一类标签。

<style>

/*直接以标签名字作为选择器

标签名{

声明1;

声明2;

声明3;

...

}

*/

h1{

font-size: 100px;

}

</style>

123456789101112131415

2.2 id选择器(重点)

id 选择器，通过标签的id属性快速定位，一般id就是元素的标识，是唯一的

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/*

id 选择器，通过标签的id属性快速定位，一般id就是元素的标识，是唯一的

id 选择器：

#id名{

声明1;

声明2;

声明3;

...

}

*/

#txt{

color: red;

}

</style>

</head>

<body>

<p id="txt">这是一行文字</p>

</body>

</html>

1234567891011121314151617181920212223242526

2.3 类选择器（重点）

类选择器，通过标签的class属性进行定位，一般class属性可以付给多个元素，同一个元素也可以有多个class值

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/*

当一个元素有多个class值时用空格隔开，并且后边的样式会覆盖前边的样式

如下，class1中有font-size属性,class2中也有font-size属性,这时同时把

.class1 和 .class1都付给了p ，则class2 会覆盖class1的font-size

.类名{

声明1;

声明2;

声明3;

...

}

*/

.class1{

color: red;

font-size: 14px;

}

.class2{

font-size: 36px;

}

</style>

</head>

<body>

</body>

</html>

1234567891011121314151617181920212223242526272829303132

2.4 层次选择器

层次选择器，通过父元素来定位子元素

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/* 给ul一个样式，它的子元素都会继承它的样式 */

ul{

color: red;

}

/* 同样的如果想通过父元素来定位子元素，可以通过

父元素子元素{

声明1;

声明2;

声明3;

声明4;

...

}

的方式进行定位

同时如果子元素有样式跟父元素一样则会覆盖

除此之外还有下一个相邻兄弟选择器

#p1+p 则为#p1的像一个相邻并且为p的元素(了解，一般不用)

下边全部兄弟元素

#p1~p 下方所有为p的兄弟元素（了解，一般不用）

*/

p{

color: red;

}

p span{

font-size: 36px;

color: aqua;

}

</style>

</head>

<body>

<ul>

</ul>

<span>这是外边的span</span>

<p><span>这是p的子元素span</span></p>

</body>

</html>

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647

2.5 伪类选择器

伪类选择器，并不是真正的选择器，而是在原来选择器的基础上进行更精准，状态不同时的元素变化的定位，常用于超链接，表单等。（爱恨原则）

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/* 伪类选择器的使用

选择器:伪类名{

声明1;

声明2;

声明3;

声明4;

...

}

*/

#u li:first-child{

/* first-child 选择器下边的第一个子元素 */

color: rgb(226, 15, 15);

}

#u li:last-child{

/* last-child 选择器下边最后一个子元素 */

color: aqua;

}

ul li:nth-child(2){

/* nth-child() 选择器下指定子元素 */

color: rgb(13, 238, 99);

}

/* 超链接常用的四个伪类（爱恨原则）:link :visited :hover :active */

#u li a:link{/*链接状态*/

color: black;

text-decoration: none;

}

#u li a:visited{/*访问过后*/

color: blue;

text-decoration: none;

}

#u li a:hover{/*当鼠标放上去时*/

color: red;

text-decoration: none;

}

#u li a:active{/*当鼠标点下去还未松开时*/

color: green;

text-decoration: none;

}

</style>

</head>

<body>

<li><a href="###">这是超链接</a></li>

</ul>

</body>

</html>

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263

2.6属性选择器（重点）

通过属性或属性值来定位

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

ul{

background-color: antiquewhite;

}

/* 属性选择器通过元素的属性或属性值定位

例：我要定位所有具有id这个属性的li标签

li[id]{

声明1;

声明2;

声明3;

声明4;

...

}

例：我要定位所有class为class1的元素

li[class=class1]{

声明1;

声明2;

声明3;

声明4;

...

}

*/

li[id]{

font-size: 36px;

}

li[id=b]{

color: red;

}

li[class]{

color: aquamarine;

}

li[class=class1]{

background-color: brown;

}

</style>

</head>

<body>

<ul>

</body>

</html>

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556

3.文本常用样式

颜色

背景颜色

字体

字号

行距

字间距

缩进

行宽度，高度

水平对齐

阴影等

更多其他

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

body{

font-size: 18px; /*改变字体大小*/

font-family: 宋体; /*改变字体*/

}

#p1{

color: green; /*调节字体颜色*/

background-color: bisque; /*调节背景颜色*/

}

#p2{

height: 100px; /*调节高度*/

line-height: 50px; /*调节行高*/

background-color: aqua;

}

#p3{

text-align: center; /*调节水平居中*/

text-shadow: aquamarine 5px 15px 1px; /*文字阴影，第一个是水平偏移，第二个是垂直偏移，第三个是模糊*/

}

#p4{

letter-spacing: 1px; /*调节字母距，中文字距*/

text-indent: 2rem; /*缩进2字*/

word-spacing: 1rem; /*词距离*/

}

#p5{

width: 50rem; /*限制宽度可放字数*/

background-color: rgb(184, 115, 12);

}

</style>

</head>

<body>

<p id="p1">超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。</p>

<p id="p2">HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML语言，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。</p>

<p id="p3">自1990年以来，HTML就一直被用作WWW的信息表示语言，使用HTML语言描述的文件需要通过WWW浏览器显示出效果。HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将影像、声音、图片、文字动画、影视等内容显示出来。事实上，每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机的文件链接超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准</p>

<p id="p4">超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。</p>

<p id="p5">HTML是用来标记Web信息如何展示以及其他特性的一种语法规则，它最初于1989年由GERN的Tim Berners-Lee发明。HTML基于更古老一些的语言SGML定义，并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据，所以很早就得到各个Web浏览器厂商的支持。</p>

</body>

</html>

12345678910111213141516171819202122232425262728293031323334353637383940414243

4.列表与链接常用样式

爱恨原则

取消下划线

列表取消默认样式

父元素li加样式

更多

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#u li {

margin-top: 10px;/*顶部间距*/

background-color: aquamarine;

width: 6rem;

height:35px;

line-height: 35px;

border-radius: 15px; /*设置圆角*/

border-bottom: 1.5px solid; /*底部边框*/

list-style: none; /*列表取消默认样式*/

text-align: center; /* 设置文本居中 */

}

#u li a{

color: black;

text-decoration: none; /*取消下划线*/

}

#u li a:link{/*未访问时的普通链接*/

color: black;

}

#u li a:visited{/*访问过后*/

color: red;

}

#u li:hover{/*鼠标放上去时*/

background-color: yellowgreen;

}

#u li a:active{/*点击时*/

color: blue;

}

</style>

</head>

<body>

</ul>

</body>

</html>

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849

5.背景图像应用与渐变

背景图片

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div{

width: 1000px;

height: 800px;

background-image: url("https://tse2-mm.cn.bing.net/th/id/OIP.Y_REHAvabXSUWA_m0yEpKQHaEo?pid=Api&rs=1");

border: 1px solid;

}/* 默认是铺满容器*/

#box1{

background-repeat: repeat-x;

}/* 横向重复*/

#box2{

background-repeat: repeat-y;

}/* 纵向重复*/

#box3{

background-repeat: no-repeat;

}/* 不重复*/

#box4{

background-repeat: no-repeat;

background-size: 100%; /*不重复横向铺满*/

}

</style>

</head>

<body>

</body>

</html>

1234567891011121314151617181920212223242526272829303132333435

颜色渐变

专业详细

调色渐变网站效率copy

调色渐变网站效率copy2

6.盒子模型

margin：外边距（往外挤）

boder：边框(内外边界)

padding：内边距（往里边挤）

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

*{ /*初始化,去掉默认盒子模型样式*/

margin: 0;

padding: 0;

}

#box{

border: 1px solid black; /* 边框1px 实线黑色*/

width: 400px;

font:24px 楷体;

margin: auto; /*快速居中*/

}

#box div{

margin: 20px 75px; /*上下边距20px 左右边距75px*/

}

#box div:last-child{

text-align: center; /*最后一个盒子(按钮)设置文本居中*/

}

#box div input:nth-child(2){

height: 22px; /*输入框高度22px*/

}

input[type="submit"]{

height: 30px; /*按钮高度30px*/

width: 80px; /* 宽度80px*/

}

</style>

</head>

<body>

<div>

</div>

<div>

</div>

</span>

</div>

</body>

</html>

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051

元素占用宽度 = margin+border+padding+内容宽度

6.2.圆角边框

border-radius: 0 0 0 0 ; (分别对应四个角)

border-radius: 100 ; (如果只设置一个直接作用于四个角)

border-radius: 100 50 ;（如果只设置两个则分别对应左上右下右上左下）

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.app{

border: 1px solid red;

width: 100px;

height: 100px;

margin-left: 20px;

float: left;

}

.app2{

border: 1px solid red;

width: 100px;

height: 50px;

margin-left: 20px;

float: left;

}

.app3{

border: 1px solid red;

height: 100px;

width: 50px;

margin-left: 20px;

float: left;

}

.class1{ /*直接变成一个圆*/

border-radius: 100px;

}

.class2{ /*直接变成一个椭圆*/

border-radius: 100px 0;

}

.class3{ /*直接变成一个门型*/

border-radius: 100px 100px 0 0;

}

.class4{/*圆角矩形*/

border-radius: 10px 10px 10px 10px;

}

.class5{/*半圆*/

border-radius: 50px 50px 0 0;

}

.class6{/*侧边半圆*/

border-radius: 50px 0 0 50px;

}

.class7{/*1/4 圆扇形*/

border-radius: 100px 0 0 0;

}

</style>

</head>

<body>

</body>

</html>

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061

实际应用案例

圆形头像

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

img{

width: 100px;

height: 100px;

border-radius:100px ;

}

</style>

</head>

<body>

</body>

</html>

123456789101112131415161718

6.3 盒子阴影

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#box{

width: 100px;

height: 100px;

border-radius: 100px;

border: 3px solid rosybrown;

box-shadow:5px 1px 5px rgb(185, 113, 125); /*盒子阴影右偏移量下偏移量模糊度颜色*/

}

</style>

</head>

<body>

</body>

</html>

1234567891011121314151617181920

7.浮动

行内元素 (宽度由内容撑开,不会独占一行)

块元素 (宽高由内容撑开，可以设置宽高，独占一行)

行内块级元素(不会独占一行的块级元素)

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

*{

padding: 0;

margin: 0;

}

ul{

margin: 0 auto;

width: 800px;

}

li{

padding: 0 30px;

display: inline-block; /*设置为行内块级元素*/

background-color: antiquewhite;

}

li:hover{

background-color: rgb(238, 12, 12);

}

li a{

text-decoration: none;

color: black;

font-size: 20px;

}

</style>

</head>

<body>

<ul>

</ul>

</body>

</html>

12345678910111213141516171819202122232425262728293031323334353637383940414243

左、右浮动与清除浮动

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#box{

background-color: rgb(211, 165, 165);

}

#box div:first-child{

float: left; /*左浮动*/

}

#box div:nth-child(2){

float: left; /*左浮动*/

}

#box div:last-child{

float: right;

}

img{

width: 300px;

}

#box div:last-child{

clear: both; 清除两边浮动

}

</style>

</head>

<body>

<span>我是box盒子，我是非浮动的</span>

1、南方的八月间，骄阳似火。中午时分，太阳把树叶都晒得卷缩起来。知了扯着长声聒个不停，给闷热的天气更添上一层烦燥。

</p></div>

</div>

</body>

</html>

1234567891011121314151617181920212223242526272829303132333435363738

父级元素塌陷问题

解决方法：

给腹肌元素增加一个height

再套一个空的div，并清除该盒子的浮动或者加一个伪类元素after，before

如果出现内容超出边界的问题，可以使用样式 overflow: scroll; 设置为滚动条

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

p{

float: left;

width: 30px;

padding: 0 20px;

background-color: aquamarine;

}

p:nth-child(4),p:nth-child(7),p:nth-child(10){

clear: both;

}

#box{

border: 1px solid;

}

#clear{

clear: both; /* 通过空盒子清除浮动来保证父盒子不会塌陷*/

margin: 0;

padding: 0;

}

#box2 p{

width: 100px;

height: 100px;

overflow: scroll; /*如果超出边界用增加一个滚动条*/

}

</style>

</head>

<body>

</div>

<p>1、南方的八月间，骄阳似火。中午时分，太阳把树叶都晒得卷缩起来。知了扯着长声聒个不停，给闷热的天气更添上一层烦燥。

</p>

</div>

</body>

</html>

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253

8.定位

8.1相对定位

position: relative; 基于原来的位置进行定位

top: -20px; left: 10px;right: 20px;bottom: -50px;

相对定位不会脱离标准文档流，原来位置保留

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div{

width: 1000px;

height: 250px;

margin: auto;

border: 1px solid;

}

.a1{

width: 800px;

height: 50px;

border: 1px solid;

background-color: antiquewhite;

position: relative;

top: -20px;

left: 10px;

}

.a2{

width: 800px;

height: 50px;

border: 1px solid;

background-color: rgb(207, 157, 91);

}

.a3{

width: 800px;

height: 50px;

border: 1px solid;

background-color: rgb(168, 99, 9);

position: relative;

right: 20px;

bottom: -50px;

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849

8.2绝对定位

基于xxx进行定位

position: absolute; 不在标准文档流中，原来位置会丢失

如果父元素没有定位则会相对于浏览器进行定位，所以一般我们把父元素设置为相对定位（子绝父相）

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#app{

width: 500px;

height: 500px;

border: 1px solid red;

padding: 10px;

position: relative;

}

p{

width: 110px;

height: 100px;

background-color: antiquewhite;

}

#app p:first-child{

position: absolute;

background-color: aqua;

left: 400px;

}

</style>

</head>

<body>

<p></p>

</div>

</body>

</html>

123456789101112131415161718192021222324252627282930313233343536

8.3固定定位

固定定位会一直定在浏览器的某一个地方

position: fixed; /固定定位/

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

body{

height: 2000px;

}

#app1{

width: 100px;

height: 100px;

background-color: aqua;

position: absolute;/*绝对定位*/

right: 0;

bottom: 0;

}

#app2{

width: 50px;

height: 50px;

background-color: rgb(32, 223, 7);

position: fixed;/*固定定位*/

right: 0;

bottom: 0;

}

</style>

</head>

<body>

</body>

</html>

123456789101112131415161718192021222324252627282930313233

9.Z-index与透明

z-index类似于PS中的图层

越是底层数字越小，层级向上层数字逐次增加

透明度设置(opacity)属性

还可以通过rgb的第四个参数来实现透明度

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

*{

padding: 0;

margin: 0;

}

#app{

width: 325px;

height: 200px;

border: 1px solid;

position: relative;

z-index: 1;

}

#app div p{

position: absolute;

bottom: 80px;

font-size: 48px;

padding: 0 113px;

color: white;

background-color: rgba(0, 0, 0, 0.418); /*设置透明度*/

/* opacity: 0.5; 设置透明度 */

z-index: 0; /*设置为最底层*/

}

</style>

</head>

<body>

</div>

</body>

</html>

1234567891011121314151617181920212223242526272829303132333435363738

10.CSS动画

插好眼了可以传送

CSS原生动画虽然可以实现，但是实现起来比较复杂，我们完全可以用JavaScript代替，但是CSS的效率会更高。

甚至一些3D动画，用JavaScript难以实现。

网友评论

本文标题：W3C三剑客——CSS快速入门

本文链接：https://www.haomeiwen.com/subject/jmrhrktx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

W3C三剑客——CSS快速入门

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读