概述
是什么
cascading style css 层叠样式表
由W3C制定的网页元素定义规则
为什么
美化
怎么办
设置样式
布局
css__10">css 引入
内部样式表
在head标签内部使用style标签
<html>
<head>
<style>css">
.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>css">
@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="css language-css">background-color: pink;width: 200px;height: 200px">
这是测试内容
</div>
css__136">css 选择器
通用选择器
css">*{
font:16px;
}
标签选择器
css">p{
}
组合选择器
css">选择器,选择器,选择器n{
}
后代选择器
css">选择器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_320">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_346">常用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>
