Web前端-CSS基础与应用
Posted 再来半包
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web前端-CSS基础与应用相关的知识，希望对你有一定的参考价值。
Web前端-CSS基础
Web前端-CSS
CSS历史
1.1990年，Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年，Web真正走出实验室。
2.1994年哈坤·利提出了CSS的最初建议
3.1997年初，W3C组织负责CSS的工作组开始讨论第一版中没有涉及到的问题
4.1998年5月：CSS2.0是一套全新的样式表结构，是由W3C推行的，同以往的CSS1.0或CSS1.2完全不一样，CSS2.0推荐的是一套内容和表现效果分离的方式html元素可以通过CSS2.0的样式控制显示效果，可完全不使用以往HTML中的table和td来定位表单的外观和样式，只需使用div和此类HTML标签来分割元素，之后即可通过CSS2.0样式来定义表单界面的外观
5.2012年：CSS3.0增加了更多的CSS选择器，可以实现更简单但是更强大的功能
CSS特点简介
丰富的样式定义
CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
易于使用和修改
CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的heade部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理
多页面应用
CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都以将其引用。这样就可以实现多个页面风格的统一。
层叠
简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。
页面压缩
在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程序的缩减了页面的体积，减少下载的时间。
CSS工作原理
工作原理：CSS全称层叠样式表,它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。是能够真正做到网页表现与内容分离的一种样式设计语言,能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言简而言之：css就是一种先选择html元素，然后设定选中元素css属性的机制实质：包含css的网页—>浏览器解析执行（Webkit CSS parser CSS解析器）---->解析后的效果呈现在页面上
CSS版本区别
1.区别：在CSS2基础上新增属性，比如圆角、阴影、:last-child与:nth-last-child()伪类选择器等以前CSS2也有的样式，因为浏览器版本不支持原因，现在CSS3中重新提出并使用，因为现在浏览器越来越高级智能，当然也就兼容HTML5 CSS3了
2.相同点：语法相同，目的相同
3.如何选择css2和css3：普通布局CSS2足够了，需要圆角、阴影、伪类等再使用CSS3，其实CSS3中90%以上css样式是css2的，只是在css2上新增和重用小部分CSS2的样式。
友情提示：要学习CSS3必须的掌握CSS2常用样式和语法、灵活应用
布局技巧，才能灵活使用CSS3样式
CSS的基本语法
<style type="text/css">
选择器(即修饰对象){
对象的属性1：属性值
对象的属性2：属性值
}
</style>
例如：
<html>
<head>
<meta charset="UTF-8">
<title>样式</title>
<style type="text/css">
p{
color: red;
}
</style>
</head>
<body>
<div>
<p>我是一个段落</p>
</div>
</body>
</html>
<!--以上代码将网页中的p段落颜色设为红色-->
CSS为HTML网页添加样式的三种方法
1.行内样式，直接写在特定标签的style属性中；
2.嵌入样式，在head元素中嵌入 <style type="text/css"></style>，将css规则放入<style>和</style>中；
3.链接样式，在<head>元素中使用外部的样式表，如：
<link href="1.css" rel="stylesheet" type="text/css" />
友情提示：3种css样式的优先级： 行内样式 > 嵌入样式 > 链接样式
CSS选择器
元素/标签选择器
通过元素进行选择，进行添加样式
例如：
<html>
<head>
<meta charset="UTF-8">
<title>样式</title>
<style type="text/css">
h1{
color: blue;
font-family: "楷体";
}
</style>
</head>
<body>
<div>
<h1>我是一级标题</h1>
</div>
</body>
</html>
以上代码将h1的文本样式进行改变，CSS中的选择器则是标签名
id选择器
通过元素的id进行选择，添加样式
例如：
<html>
<head>
<meta charset="UTF-8">
<title>样式</title>
<style type="text/css">
#abc{
color: blue;
font-family: "楷体";
}
</style>
</head>
<body>
<div id="abc">
<h1>我是一级标题</h1>
</div>
</body>
</html>
以上代码是将id为abc的所有的元素进行一个样式的改变
class选择器
通过定义元素的class选择，添加样式
<html>
<head>
<meta charset="UTF-8">
<title>样式</title>
<style type="text/css">
.box{
color: blue;
font-family: "楷体";
}
</style>
</head>
<body>
<div >
<h1 class="box">我是一级标题</h1>
</div>
</body>
</html>
以上代码是将class为box中的所有的元素进行一个样式的改变
群组选择器
备注：群组选择器，其目的是为了能实现统一设定一些相同的属性，但是每一个之间必须以英文的逗号隔开
<html>
<head>
<meta charset="UTF-8">
<title>样式</title>
<style type="text/css">
h1,h3,p{
color: blue;
font-family: "楷体";
}
</style>
</head>
<body>
<div >
<h1 >我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<p>我是一个段落</p>
</div>
</body>
</html>
以上代码只会将h1、h3、p元素中的样式进行改变，而h2中的样式则不会改变
包含选择器
提示：前一个标签与被包含标签 之间是有空格间隔的 称为（父子选择器）
<html>
<head>
<meta charset="UTF-8">
<title>样式</title>
<style type="text/css">
div h1{
color: blue;
font-family: "楷体";
}
</style>
</head>
<body>
<div >
<h1 >我是一级标题</h1>
<h3>我是三级标题</h3>
</div>
<p>我是一个段落</p>
</body>
</html>
以上代码只有div下的h1样式发生了改变，别的元素则不会发生改变
通配选择器
提示：以*开始起意思代表为所有，但是在开发过程中基本上不使用
<html>
<head>
<meta charset="UTF-8">
<title>样式</title>
<style type="text/css">
*{
color: red;
}
div h1{
color: blue;
font-family: "楷体";
}
</style>
</head>
<body>
<div >
<h1 >我是一级标题</h1>
<h3>我是三级标题</h3>
</div>
<p>我是一个段落</p>
</body>
</html>
以上的代码div中的h3和p标签都会受到*选择的影响，但是因为h1属性包含选择器，权重大于通配选择器，所以h1的样式还由包含选择器掌握
伪类选择器
CSS的伪类选择器：用于向某些选择器添加特殊的效果
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
a:link{
color: red;
}
a:visited{
color: blue;
}
a:hover{
color: yellow;
}
a:active{
color: black;
}
</style>
</head>
<body>
<a href="testcss001.html">伪类选择器</a>
</body>
</html>
提示：1）4种状态的意思
未访问状态（a:link ）
已访问状态（a:visited ）
鼠标移上状态（a:hover ）
激活选定状态（a:active ）
2）且一般是应用在a标签上的，别的标签也可以，但是最多的还是a标签上的使用
伪对象选择器
CSS伪对象选择器：用于向被选中元素的内容前面或者后面插入内容
:before 选择器在被选元素的内容前面插入内容。
:after 选择器在被选元素的内容后面插入内容。
注意：before 和after必须和content结合使用，即使没有内容插入也要写content=’ ’
<html>
<head>
<meta charset="UTF-8">
<title>伪对象选择器</title>
<style type="text/css">
.box{
color: red;
border: 1px solid #FF00FF;
}
.box:after{
content: "然后去吃饭";
}
.box:before{
content: "先穿好衣服、叠好被子再";
}
</style>
</head>
<body>
<div class="box">去洗漱</div>
</body>
</html>
单纯一个div里面的文本则是：去洗漱，但是用了伪对象选择器，对前面和后面进行了文本的追加，在网页上显示的为：先穿好衣服、叠好被子再去洗漱然后去吃饭，但是真是的文本则只有：去洗漱
选择器的权重
权重：权重是指某一因素或指标相对于某一事物的重要程度，其不同于一般的比重，体现的不仅仅是某一因素或指标所占的百分比，强调的是因素或指标的相对重要程度，倾向于贡献度或重要性。通常，权重可通过划分多个层次指标进行判断和计算，常用的方法包括层次分析法、模糊法、模糊层次分析法和专家评价法等
简而言之：可以理解为是份量（就是所占的比重）
权重记忆口诀。从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1
例如：body #content .data img :hover
最终的权重值是：122；#content是一个id选择器加了100，.data是一个class类选择器加了10，：hover伪类选择器加了10， body和img是元素选择器所以加了1
CSS属性
文本属性
文字大小：font-size 单位：px em：1em=16px
文字颜色：color
文字字体：font-family
文本样式（粗细）：font-weight
文本倾斜：font-style
文本修饰：text-decoration
文本转换：text-transform
字间距：letter-spacing
单词间距：word-spacing
文字对齐：text-align
<html>
<head>
<meta charset="UTF-8">
<title>文字</title>
<style type="text/css">
p{
font-size: 64px;/*定义字体大小为64像素*/
color: blue; /*设置字体颜色为蓝色*/
font-family: "隶书"; /*设置文字字体为隶书*/
font-weight: 300; /*设置文字粗细为300*/
font-style: oblique; /*设置文字倾斜*/
text-decoration: underline;/*定义文本下一条线*/
/*text-decoration: line-through;定义穿过文本的一条线*/
text-align: center; /*设置文字居中*/
letter-spacing: 10px; /*设置字间距为10像素*/
}
</style>
</head>
<body>
<p>我是一个段落blue</p>
</body>
</html>
扩展
文字对齐：text-align 参数可以是
left（默认）：文本排列到左边
right：文本排到右边
center：文字排列到中间
justify： 实现两端对齐文本效果
文字转换：text-transform 参数可以为
none：默认。定义带有小写字母和大写字母的标准的文本
capitalize：文本中的每个单词以大写字母开头
uppercase：定义仅有大写字母
lowercase：定义无大写字母，仅有小写字母
列表属性
list-style-type:列表的样式
list-style-image:列表导航点图片
list-style-postion:导航点的位置
<html>
<head>
<meta charset="UTF-8">
<title>列表样式</title>
<style type="text/css">
li{
width: 250px;
color: blue;
font-size: 30px;
font-family: "隶书";
list-style-type: square; /*将列表前面的变成方框*/
float: left;
}
</style>
</head>
<body>
<div >
<ul>
<li>首页</li>
<li>我的</li>
<li>登录</li>
<li>注册</li>
<li>加入收藏</li>
<li>设为主页</li>
</ul>
</div>
</body>
</html>
CSS边框
设定div的边框样式
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
border-width: 2px 10px 5px 100px; /*钟表原则 设置边框的线宽*/
border-color: black blue red pink; /*设置边框的线的颜色*/
border-style: solid;/*设置边框的线的样式*/
}
.box1{
width: 300px;
height: 300px;
border-right-width: 2px;/*设置右边线宽2px*/
border-right-color: darkred;/*设置右边线颜色*/
border-right-style: dotted;/*设置右边线样式*/
}
</style>
</head>
<body>
<div class="box"></div>
<br />
<br />
<div class="box1"></div>
</body>
</html>
CSS背景
background-color：设置背景颜色
background-image：设置背景图片
background-repeat：设置背景平铺方式
background-position：设置背景对齐方式
CSS浮动
1.默认的常规文档流：页面内容从上到下，从左到右排列。DIV块换行显示
2.浮动会脱离文档流 ，脱离常规文档流而表现为向右或向左浮动，浮动脱离文档流的时候是按照上一个非浮动元素去作为参考的，如果你的上一个元素是浮动的，那么你的参考线会继续向上查找，直到查找到非浮动元素为止
3.当指定了元素浮动之后 ，元素脱离文档流，会按照浮动方向进行排列
<html>
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
#one{
width: 200px;
height: 200px;
background-color: red;
float: right;
}
#two{
width: 300px;
height: 300px;
background-color: blue;
}
#three{
width: 200px;
height: 200px;
background-color: green;
floatmarkdown Snippets.md是我最常用的HTML，CSS和JavaScript代码片段，用于前端Web开发
进击的Python第十三章：Web前端基础之HTML与CSS样式
css与javascript重难点，学前端，基础不好一切白费！