概述
是什么
cascading style css 层叠样式表
由W3C制定的网页元素定义规则
为什么
美化
怎么办
设置样式
布局
css 引入
内部样式表
在head标签内部使用style标签
<html><head><style>.id{width: 400px;height: 400px;border: 1px solid black;margin: 0 auto;}</style></head><body><div class="id">这是测试内容</div></body></html>
外部样式表
- 在head标签中使用link标签引入外部样式表
<html><head><link rel="stylesheet" href="test.css"></head><body><div class="id">这是测试内容</div></body></html>
- 在style 标签内使用 @import 导入外部样式表
<html><head><style>@import url("test.css");.id{width: 400px;height: 400px;border: 1px solid black;margin: 0 auto;}</style></head><body><div class="id">这是测试内容</div></body></html>
link 和 @import的区别
- @import url(‘名字.css’)
整个网页加载完,才加载样式,可能导致不能及时显示网页的样式 - link
内联样式
给标签添加style 属性
<div class="id" style="background-color: pink;width: 200px;height: 200px">这是测试内容</div>
css 选择器
通用选择器
*{
font:16px;
}
标签选择器
p{}
组合选择器
选择器,选择器,选择器n{}
后代选择器
选择器1 选择器2{}
类选择器
元素名 . 类选择符名
在这个例子中，p.highlight选择器将选择所有带有highlight类的<p>元素，并将它们的文字加粗且变为红色
<p>这是一段普通文本。</p>
<p class="highlight">这段文本需要高亮显示。</p>
<p>这是另一段普通文本。</p>
p.highlight {
font-weight: bold; color: red;
}
<div class="box special">这是一个特殊的盒子</div>
<div class="box">这是一个普通的盒子</div>.box.special {
background-color: green; color: white;
}
.box {
border: 1px solid #ccc; padding: 10px;
}.类选择符名
.box {
border: 1px solid #ccc; padding: 10px;
}id选择器
元素名#id选择器名
div#unique-div {
background-color: lightblue; color: white;
padding: 20px;
border: 2px solid navy; }
#id选择器名
#unique-box {
background-color: yellow;
color: black;
padding: 20px;
border: 2px solid black; }
选择器高级
属性选择器
不局限id,class属性,
伪类选择器
添加到选择器的关键字
指定要选择的元素的特殊状态
div:hover{
鼠标悬停
}
div:active{
选中链接,鼠标按住不放
}//a特有
a:link{
链接未被访问前
}
a:visited{
访问过的链接状态
}
a:hover 必须置于link,和visited之后
a:active必须置于hover之后
伪元素选择器
对元素内容一部分设置样式
::伪元素名
首字母和首行伪元素
::before ::after
选择器优先级
id>classs 类选择器>tagName 标签选择器
盒模型
页面中所有元素都可以理解为盒模型
组成:
content+padding+border+margin
盒子边框制作三角形
<!-- 利用盒子边框制作三角形 --><div class="triangle-down"></div>.triangle-down { width: 0; height: 0; border-top: 50px solid transparent;border-left: 50px solid transparent; /* 左边框透明 */ border-right: 50px solid transparent; /* 右边框透明 */ border-bottom: 100px solid black; /* 下边框为黑色，形成三角形 */ }
元素分类
块元素
- diplay:block
- 独占一行
- 常见块级元素 : div,p,ui,li,ol,dl,dd,dr,h
行内元素
- diplay:inline
- 一行显示,设置宽高不生效,
行内元素内部不能放块级元素 - 常见元素:a,img,span,input,label,em,strong
行内块元素
- diplay:inline-block
- 一行显示,设置宽高生效
可以放块级元素
css继承
可继承
样式属性中能继承的一般与字体和文本有关
如font、font-size、color、text-align、text-indent、letterspacing、word-spacing等。
-
字体和文本属性全都可以被继承，
但a标签不能直接继承父级元素的颜色，一般需要单独设置才能改变超链接及其相关伪类的颜色，也可以通过对a元素设置“color:inherit; ”来继承父级元素的颜色 -
li会继承父元素ul或ol的list-style属性；
-
多数边框类的属性，如：border（边框）、padding（填充）、margin（边界）等等，都是没有继承性的。可通过对子元素设置“border:inherit;”来继承父元素的边框属性，但只能继承其直接的父级元素边框属性。填充和边界属性也是同理。
常用属性
字体
文本
背景
常用css3
border-radius
box-shadow
text-shadow
overflow
visibility
布局
文档流布局
普通流布局
默认布局
浮动float
float:none(默认)
float:left
float:right
- 实现块元素同行排列,一行多列
- 图文环绕效果
清除浮动影响
浮动元素与普通流元素发生重叠
<style>.wrapper{float: left;width: 200px;height: 200px;background-color: pink;}.box{width: 500px;height: 500px;border: 2px solid black;clear: both;}</style></head><body><div class="wrapper">12234r</div><div class="box">dfwerq</div></body></html>
定位
- 静态定位 static 默认定位
- 绝对定位 absolute
==参照物最近已定位元素(都没有就是body) - 相对定位 relative
==参照物自己原位置 - 固定定位 fixed
==参照物浏览器可视窗口 - z-index 确定元素的层叠顺序
- 边偏移属性,用来确定元素的最终位置
top,left,right,bottom
元素居中
水平居中
- margin auto
<style>.wrapper{margin: 0 auto;width: 200px;height: 200px;background-color: pink;}</style></head><body><div class="wrapper"></div></body>
- margin 负值
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.wrapper{position: absolute;left: 50%;width: 200px;height: 200px;background-color: pink;margin-left: -100px;}</style></head><body><div class="wrapper"></div></body></html>
