CSS
-
内嵌式：css写在style标签中，style标签一般写在head标签里面，title标签下面
-
外联式：写在单独的css文件中，通过link标签引入
-
行内式：一般避免写
<style>
p{ /*选择器*/
color:
}
</style>
选择器
选择页面中对应的标签，方便后续设计样式
三大选择器
- 标签选择器
<head>
<title></title>
<style>
p{ /*标签选择器：将使用的p标签都变为红色*/
color:red;
}
span{
color:gray;
}
</style>
</head>
<body>
<h1>
这是一级标题
</h1>
<p>
这是段落1
</p>
<p>
这是段落2
</p>
<span>这是布局标签</span>
</body>
- 类选择器和id选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.red{ /*class选择器，用.*/
color:red;
}
.blue{
color:blue;
}
#p1{ /*id选择器，指定单独一个id，用#*/
font-size:14px;
}
</style>
</head>
<body>
<h1>这是一级标题</h1>
<p class="red">这是段落1</p> <!--class：分类-->
<p id="p1">这是段落2</p>
<p class="red">这是段落3</p>
<p class="blue">这是段落4</p>
<span>这是布局标签</span>
</body>
</html>
通配符
<style>
*{ /*匹配所有*/
}
</style>
字体和文本样式
- 字体大小：font-size 数字+px，谷歌浏览器默认文字大小是16px
- 字体粗细：font-weight
- 关键字：normal,加粗bold
- 取值：100-900之间的整百数
- 字体倾斜：font-style
- 关键字：italic
- 字体：font-family
- 字体系列不需要引号包裹
- 文本缩进：text-indent
- 数字+px
- 数字+em
- 水平对齐：text-align
- left center right
- 下划线-删除线-顶线：text-decoration
- underline(下划线) line-through(删除线) overline(上划线) none(无修饰线)
- 开发中会使用 text-decoration : none ; 清除a标签默认的下划线
- 行高：line-height
- 数字+px
- 倍数
- 如果同时设置了行高和font连写，注意覆盖问题。font : style weight size/line-height family ;
- 样式层叠：后面的样式会覆盖前面的（就近原则）
- font连写：
- font : style weight size family;
- 省略要求：只能省略前两个，如果省略了相当于设置了默认值
- 注意点：如果需要同时设置单独和连写形式
- 要么把单独的样式写在连写的下面
- 要么把单独的样式写在连写的里面
选择器进阶
复合选择器
后代选择器
- 语法：选择器1 选择器2 {css} （通过空格分开）
在选择器1所找到标签的后代（儿子、孙子…）中，找到满足选择器2的标签，设置样式
- 逐级往下对应找
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div span p{ /*后代复合选择器*/
color:red;
}
</style>
</head>
<body>
<div>
<p>这是一段文字</p>
<span>这是一段文本</span>
<span><a href="#">超链接1</a></span>
<a href="#">超链接2</a>
<span>
<p>这是另外一段文本</p> <!--变色-->
</span>
</div>
</body>
</html>
- 尽量减少class与id的使用，规范
子代选择器（只包含儿子，不包含孙子）
- 语法：选择器1>选择器2 {css}
- 任何一个父子关系都可以
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div > p{ /*后代复合选择器*/
color:red;
}
span > p{
color:blue;
}
</style>
</head>
<body>
<div>
<p>这是一段文字</p> <!--变红色-->
<span>这是一段文本</span>
<span><a href="#">超链接1</a></span>
<a href="#">超链接2</a>
<span>
<p>这是另外一段文本</p> <!--变蓝色-->
</span>
</div>
</body>
</html>
并集选择器
-
作用：同时选择多组标签，设置相同的样式
-
语法：选择器1，选择器2 {css}
-
通常一行写一个，代码规范
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p, /*一行写一个*/
span{ /*p和span标签，都会变红*/
color:red;
}
</style>
</head>
<body>
<div>
<p>这是一段文字</p>
<span>这是一段文本</span>
<span><a href="#">超链接1</a></span>
<a href="#">超链接2</a>
<span>
<p>这是另外一段文本</p>
</span>
<h1>标题</h1>
</div>
</body>
</html>
交集选择器
- 作用：选中页面中 同时满足 条件的标签
- 语法：选择器1选择器2{css} (紧挨着)
- 不能是两个标签紧挨着，编译器无法区分，可以用标签与class等取交集
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
span.sp1{ /*标签+类选择器*/
color:red;
}
</style>
</head>
<body>
<div>
<p>这是一段文字</p>
<span>这是一段文本</span>
<span><a href="#">超链接1</a></span>
<a href="#">超链接2</a>
<span class="sp1">
<p>这是另外一段文本</p>
<p>这是文本3</p>
</span>
<span class="sp2">
<p>这是文本4</p>
<p>这是文本5</p>
</span>
<h1>标题</h1>
</div>
</body>
</html>
hover伪类选择器
-
作用：选中鼠标悬停时
-
语法：选择器：hover{ css }
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p:hover{
color:blue;
}
</style>
</head>
<body>
<p>这是一段文字</p> <!--当鼠标悬浮在文字上时，变蓝-->
</body>
</html>
背景相关属性
背景颜色
-
属性名：background-color
-
属性值：
- 颜色取值：关键字、rgb表示法、rgba表示法、十六进制…
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
background-color: red; /*rgb(3,6,0) rgba(3,6,0,0.5):0.5是透明度 #fffff*/
height: 200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
背景图片
-
属性名：background-image
-
语法：background-image: url(“”);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background-image: url("");
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- 背景平铺：background-repeat
- 默认水平和垂直方向平铺
- 不平铺：no-repeat
- 水平方向平铺：repeat-x
- 垂直方向平铺：repeat-y
背景位置
- 属性名：background-position (缩写: bgp )
- 语法：background-position：水平方向位置 垂直方向位置；
- 水平有left center right
- 垂直有top center bottom
- 都可以用像素位置
多值顺序：color image repeat position
元素显示模式
- 块级元素
- 特点：
- 独占一行
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高
- 代表标签：div,p,h系列、ul、dl
- 特点：
-
行内元素
- 特点：
- 一行内可以有多个
- 由块级元素撑开
- 不可以设置宽高
- 代表标签：a、span
- 特点：
-
行内块元素
- 特定：
- 一行可以显示多个
- 可以设置宽高
- 代表标签：input
- 特定：
-
元素显示模式转换：
| 方法 | 效果 |
|---|---|
| display : block | 转换为块级元素 |
| display : inline-block | 转换为行内块元素 |
| display : inline: | 转换为行内元素（不常用） |
盒子模型
页面中的每一个标签都可以是一个“盒子”，由边框、内边框、边距组成盒子
CSS中规定每个盒子分别由：内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成
内容
-
作用：利用 width 和 height 属性默认设置是盒子 内容区域 的大小
-
属性：width / height
-
常见取值：数字+px
边框border
| 作用 | 属性名 | 属性值 |
|---|---|---|
| 边框粗细 | border-width | 数值+px |
| 边框样式 | border-style | 实线solid、虚线dashed、点线dotted |
| 边框颜色 | border-color |
- 顺序：border： 1px solid red
内边距padding
设置边框与内容区域之间的距离
- 属性名：padding
- 可以通过指定方式加边距：padding-top…
| 属性值 | 作用 |
|---|---|
| padding 10px | 上下左右都设置 为10px |
| padding 10px 20px | 上下为10px 左右为20px |
| padding 10px 20px 30px | 上为10px 左右为20px 下为30px |
| padding 10px 20px 30px 40px | 从上开始顺时针设置，上10右20下30左40 |
外边距（元素与元素之间的间距）margin
- 属性名：margin
取值和内边距一样
清除默认边距
<style>
*{
padding=0;
margin=0;
}
</style>
/**
*案例,导航标题
**/
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
div{ /*搭建框架，div是块级元素*/
height: 60px;
width:300px;
border:1px solid red;
/*padding: 10px 0;*/
}
span{
display: inline-block; /*因为span是行内元素，不能设置宽高，又因为是一行内有多个子块，因此要将其转换为行内块元素*/
height:60px;
line-height: 60px;
font-size: 14px;
text-align:center;
}
span:hover{ /*鼠标悬停时产生的效果*/
background-color: aliceblue;
color:orange;
}
</style>
</head>
<body>
<div>
<span>设为首页</span> <!-- span默认不换行,div默认换行，这里不能用div-->
<span>手机新浪网</span>
<span>移动客户端</span>
</div>
</body>
</html>
916
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
