CSS简介
CSS概念
CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表
CSS文件后缀名为 .css
CSS用于HTML文档中元素样式的定义
为什么需要CSS
使用css的目的就是让网页具有美观一致的页面
CSS和HTML之间的关系
1 HTML用于构建网页的结构
2 CSS用于构建HTML元素的样式
3 HTML是页面的内容组成，CSS是页面的表现
语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明
选择器通常是您需要改变样式的 HTML 元素
每条声明由一个属性和一个值组成属（property）是您希望设置的样式属性（style attribute）。每
个属性有一个值。属性和值被冒号分开
<style>
h1{
color: blue;
font-size: 12px;
}
</style>
CSS的引入方式
内联样式（行内样式）
要使用内联样式，你需要在相关的标签内使用样式（style）属性。
Style 属性可以包含任何 CSS 属性
温馨提示
缺乏整体性和规划性，不利于维护，维护成本高
<p style="background: orange; font-size:
24px;">CSS<p>
内部样式
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表
温馨提示
单个页面内的CSS代码具有统一性和规划性，便于维护，但是在多个页面之间容易混乱
<head>
<style>
h1 {
background: red;
}
</style>
</head>
外部样式（推荐）
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部
<link rel="stylesheet" type="text/css"
href="xxx.css">
导入式（了解）
此种方式使用率比较低,因为会影响加载速度
<style type="text/css">
@import url("css文件路径");
</style>
@import和link的区别
1 @import 是 CSS 提供加载样式的一种方式，只能用于加载 CSS 。 link 标签除了可以加载 CSS
外，还可以做很多其它的事情，比如定义 rel 连接属性等
2 加载顺序的差别。当一个页面被加载的时候， link 引用的 CSS 会同时被加载， @import 引用的
CSS 会等到页面全部被下载完再被加载。所以有时候浏览 @import 加载 CSS 的页面时开始会没
有样式（就是闪烁），网速慢的时候会比较明显
3 兼容性的差别。 @import 在 IE5 以上才能识别，而 link 标签无此问题
4 使用 dom 控制样式时的差别。当使用 javascript 控制 dom 去改变样式的时候，只能使用 link 标
签，因为 dom 操作元素的样式时，用 @import 方式的样式也许还未加载完成
5 使用 @import 方式会增 HTTP 请求，会影响加载速度，所以谨慎使用该方法
CSS样式表特征
继承性
指被包含在内部的标签可以拥有外部标签的样式，比如：text-、font-、line-height，但有些属性不能继承，比如：border、padding、margin
层叠性
简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果
优先级
样式定义冲突时，按照不同样式规则的优先级来应用样式
行内样式>内部样式（外部样式）
内部样式和外部样式优先级一样，写在后面的生效
CSS注释
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它
CSS注释以 /* 开始, 以 */ 结束,
/* 这是注释 */
基础选择器一
全局选择器
可以与任何元素匹配，优先级最低，不推荐使用
*{
margin: 0;
padding: 0;
}
元素选择器
HTML文档中的元素， p、b、div、a、img、body 等。
标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”
p{
font-size:14px;
}
再比如说，我想让“学完前端，继续学Java”这句话中的“前端”两个变为红色字体，那么我可以用 <span> 标签把“前端”这两个字围起来，然后给 <span> 标签加一个标签选择器
<p>学完了<span>前端</span>，继续学Java</p>
span{
color: red;
}
温馨提示
1 所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等
2 无论这个标签藏的多深，一定能够被选择上
3 选择的所有，而不是一个
类选择器
规定用圆点 . 来定义，针对你想要的所有标签使用
优点：灵活
<h2 class="oneclass">你好</h2>
/*定义类选择器*/
.oneclass{
width:800px;
}
class属性的特点
1 类选择器可以被多种标签使用
2 类名不能以数字开头
3 同一个标签可以使用多个类选择器。用空格隔开
<h3 class="classone classtwo">我是一个h3啊
</h3>
<h3 class="teshu" class="zhongyao">我是一个h3啊
</h3> // 错误
基础选择器二
ID选择器
针对某一个特定的标签来使用，只能使用一次。 css 中的 ID选择器 以 #来定义
<h2 id="mytitle">你好</h2>
#mytitle{
border:3px dashed green;
}
特别强调
1 ID是唯一的
2 ID不能以数字开头
合并选择器
语法： 选择器1,选择器2,...{ }
作用：提取共同的样式，减少重复代码
.header, .footer{
height:300px;
}
选择器的优先级
CSS中,权重用数字衡量
元素选择器的权重为: 1
class选择器的权重为: 10
id选择器的权重为: 100
内联样式的权重为: 1000
优先级从高到低: 行内样式 > ID选择器 > 类选择器 > 元素选择器
DIV+CSS布局
优点
1 符合W3C标准
2 使页面载入得更快
3 保持视觉的一致性
4 修改设计时更有效率
5 搜索引擎友好
布局时常用的属性
布局-上中下结构
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
<style>
.header {
height: 100px;
background-color: #fcc;
}
.content {
height: 400px;
background-color: #ff9;
}
.footer {
height: 100px;
background-color: #ccf;
}
</style>
布局-上中下-左右
<div class="container">
<div class="header"></div>
<div class="nav"></div>
<div class="content">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</div>
<style>
.header {
width: 100%;
height: 100px;
background-color: red;
}
.nav {
width: 100%;
height: 50px;
background-color: pink;
}
.content {
width:100%;
height: 300px;
background-color: yellow;
}
.footer {
width: 100%;
height: 150px;
background-color: deepskyblue;
}
.left {
width: 33.33%;
height: 300px;
background-color: palegoldenrod;
float: left;
}
.center {
width: 33.33%;
height: 300px;
background-color: palegreen;
float: left;
}
.right {
width: 33.33%;
height: 300px;
background-color: palevioletred;
float: left;
}
</style>
布局实操一
<div class="box">
<div class="left">
<div class="top"></div>
<div class="bottom"></div>
</div>
<div class="right"></div>
</div>
<style>
.box{
width: 500px;
height: 500px;
}
.left{
float: left;
width: 250px;
height: 500px;
}
.right{
float: right;
width: 250px;
height: 500px;
background-color: burlywood;
}
.top{
width: 250px;
height: 250px;
background-color: pink;
}
.bottom{
width: 250px;
height: 250px;
background-color: turquoise;
}
</style>
<div class="box">
<div class="left"></div>
<div class="right">
<div class="top"></div>
<div class="bottom">
<div class="b-left"></div>
<div class="b-right"></div>
</div>
</div>
</div>
<style>
.box{
width: 600px;
height: 600px;
}
.left{
float: left;
width: 200px;
height: 600px;
background-color: pink;
}
.right{
float: right;
width: 400px;
height: 600px;
}
.top{
width: 400px;
height: 300px;
background-color: springgreen;
}
.b-left{
float: left;
width: 200px;
height: 300px;
background-color: slateblue;
}
.b-right{
float: right;
width: 200px;
height: 300px;
background-color: tan;
}
</style>
布局实操二
<div class="phone">
<div class="left">
<img src="./images/1.webp" alt="">
</div>
<div class="right">
<div class="item">
<img src="./images/2.webp"
alt="">
<h3>黑鲨4S</h3>
<p>磁动力升降肩键</p>
</div>
<div class="item">
<img src="./images/2.webp"
alt="">
<h3>黑鲨4S</h3>
<p>磁动力升降肩键</p>
</div>
<div class="item">
<img src="./images/2.webp"
alt="">
<h3>黑鲨4S</h3>
<p>磁动力升降肩键</p>
</div>
<div class="item">
<img src="./images/2.webp"
alt="">
<h3>黑鲨4S</h3>
<p>磁动力升降肩键</p>
</div>
<div class="item">
<img src="./images/2.webp"
alt="">
<h3>黑鲨4S</h3>
<p>磁动力升降肩键</p>
</div>
<div class="item">
<img src="./images/2.webp"
alt="">
<h3>黑鲨4S</h3>
<p>磁动力升降肩键</p>
</div>
<div class="item">
<img src="./images/2.webp"
alt="">
<h3>黑鲨4S</h3>
<p>磁动力升降肩键</p>
</div>
<div class="item">
<img src="./images/2.webp"
alt="">
<h3>黑鲨4S</h3>
<p>磁动力升降肩键</p>
</div>
</div>
</div>
<style>
body{
background-color: #f1f1f1;
}
.phone{
width: 1300px;
height: 680px;
margin: 0 auto;
}
.left{
float: left;
width: 234px;
height: 680px;
margin-top: 10px;
}
.right{
float: right;
width: 1050px;
}
.item{
width: 250px;
height: 300px;
float: left;
margin-left: 10px;
background-color: #fff;
margin-top: 10px;
text-align: center;
}
</style>
扫一扫
251
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
