2.CSS样式
css
css介绍
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。
行内样式
<p style="color: red">Hello world.</p>
内部样式
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: red;
}
</style>
</head>
外部样式
<link rel="stylesheet" href="commons.css" />
标签选择器
div{ background-color:red; }
<div >xiaoqian</div>
class选择器
.bd{ background-color:red; }
<div class='bd'> xiaoqian</div>
id选择器
#idselect{ background-color:red; }
<div id='idselect' > xiaoqian</div>
通用选择器
* {
color: white;
}
关联选择器（空格）
#idselect p{ background-color:red; }
<div id='idselect' >
<p> xiaoqian</p>
</div>
组合选择器
后代选择器
/*li内部的a标签设置字体颜色*/
li a {
color: green;
}
儿子选择器
/*选择所有父级是 <div> 元素的 <p> 元素*/
div>p {
font-family: "Arial Black", arial-black, cursive;
}
毗邻选择器
/*选择所有紧接着<div>元素之后的<p>元素*/
div+p {
margin: 5px;
}
弟弟选择器
/*i1后面所有的兄弟p标签*/
#i1~p {
border: 2px solid royalblue;
}
属性选择器
input[type='text']{ width:100px; height:200px; }
优先级，标签上style优先，编写顺序，就近原则
注释
/* 注释的内容*/
伪类选择器
/*连接没有被点击过*/
a:link {
color: burlywood;
}
/*连接被点击过*/
a:visited {
color: green;
}
/*鼠标移上去*/
a:hover {
color: blueviolet;
}
/*被选定*/
a:active {
color: deeppink;
}
/*input获取光标时*/
input:focus {
outline: 0;
background-color: deeppink;
}
伪元素选择器
first-letter
给首字母设置样式
p:first-letter {
font-size: 48px;
color: red;
}
before
/*在每个<p>元素之前插入内容*/
p:before {
content:"*";
color:red;
}
after
/*在每个<p>元素之后插入内容*/
p:after {
content:"[?]";
color:blue;
}
选择器优先级
内联样式的权重为1000
ID选择器的权重为100
类选择器的权重为10
元素选择器的权重为1
权重进位永不进位
!important 强制让样式生效,不推荐
属性
字体
/*字体文体*/
body {
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}
/*字体大小*/
p {
font-size: 14px;
}
字重
font-weight用来设置字重
| 值 | 描述 |
|---|---|
| normal | 默认值，标准粗细 |
| bold | 粗体 |
| bolder | 更粗 |
| lighter | 更细 |
| 100~900 | 设置具体粗细，400等同于normal，而700等同于bold |
| inherit | 继承父元素字体的粗细值 |
字体颜色
十六进制：#FF0000
RGB值：RGB(255,0,0)
颜色名：red
文字对齐
text-align属性设置对齐方式
| 值 | 描述 |
|---|---|
| left | 左边对齐 默认值 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
文字装饰
text-decoration属性设置特殊效果
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
| inherit | 继承父元素的text-decoration属性的值。 |
去掉a标签下的默认下划线
a {
text-decoration: none;
}
去掉ul标签默认下的黑点
*{
list-style-type:none
}
首行缩进
p {
text-indent: 32px;
}
背景属性
/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
*/
background-repeat: no-repeat;
/*背景位置*/
background-position: right top;
/*background-position: 200px 200px;*/
鼠标滑动背景不动案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>背景不动效果示例</title>
<style>
.c1 {
height: 500px;
background: red;
}
.c2 {
height: 500px;
background: url("图片") no-repeat center;
background-attachment: fixed; /*把背景图固定*/
}
.c3 {
height: 500px;
background-color: green;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>
边框
简写样式
#i1 {
border: 2px solid red;
}
边框样式
border属性设置
| 值 | 描述 |
|---|---|
| none | 无边框。 |
| dotted | 点状虚线边框。 |
| dashed | 矩形虚线边框。 |
| solid | 实线边框。 |
border-radius
实现园角边框效果
/*头像样式*/
.header-img {
height: 128px;
width: 128px;
border: 5px solid white;
border-radius: 50%;
overflow: hidden;
margin: 0 auto;
margin-top: 20px;
}
.header-img>img {
max-width: 100%;
}
margin外边框
.margin-test {
margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;
}
居中
.mycenter {
margin: 0 auto;
}
padding内填充
.padding-test {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}
简写
.padding-test {
padding: 5px 10px 15px 20px;
}
顺序：上左下右
float
让标签浮起来，块级标签也可以堆叠
left：向左浮动
right：向右浮动
none：默认值，不浮动
clear
清除悬浮<div style="clear: both;"></div>只对自身起作用
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |
display
display: none; 让标签消失
display: inline; 块级标签变行内标签
display: block;行内标签变快级标签
display: inline-block; 块级标签和行内标签都包含
具有inline,默认自己有多少占多少
具有block，可以设置无法设置高度，宽度，padding margin
父标签塌陷：
.clearfix:after {
content: "";
display: block;
clear: both;
}
overflow溢出属性
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
- overflow（水平和垂直均设置）
- overflow-x（设置水平方向）
- overflow-y（设置垂直方向）
position
position:fiexd; 固定在页面的某一个位置
position:absolute; 绝对定位
position:relative;相对定位
background
background:color; 背景颜色
hover
指一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。
z-index
z-index:9;数字大优先级越大，数字大的会覆盖数字小的内容
z-index:8;
opacity
opacity:0.5; 调节透明度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ position: fixed; right: 0; top: 0; left: 0; height: 48px; background-color: #2456a2; line-height: 48px; } .pg-body{ margin-top: 50px; } .w{ width: 980px; margin: 0 auto; } .pg-header .menu{ display: inline-block; padding: 0 10px 0 10px; color: white; } .pg-header .menu:hover{ background-color: blue; } </style> </head> <body> <div class="pg-header"> <div class="w"> <a class="loge">LOGO</a> <a class="menu">全部</a> <a class="menu">图片</a> <a class="menu">段子</a> <a class="menu">新闻</a> </div> </div> <div class="pg-body"> <div class="w">内容</div> </div> </body> </html> 菜单栏
