前端之CSS
层叠样式表(口红，美甲，眉笔，化妆盒)
语法结构
选择器 {属性:属性值;属性:属性值;属性:属性值;}
css
引入css的三种样式
三种引入css样式的方式
1.head内style标签内部直接书写css代码
2.link标签引入外部css文件
3.直接在标签内通过style属性书写css样式
ps:注意页面css样式通常都应该写在单独的css文件中
<!--
"mycss.css"里的文件内容
p {color: darkblue }
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>yaya</title>
<link rel="stylesheet" href="mycss.css"> # 第二种方法
<style>
p{color: blueviolet } # 第一种方法
</style>
</head>
<body>
<p style="color: deepskyblue ">我是p标签</p> #第三种方法
</body>
</html>
注意:
1.link标签引入外部css文件,一定要写rel="stylesheet",不然失效.
2.head内style标签内部直接书写css代码,
注释
/*单行注释*/
/*
多行注释
*/
如果先把style先注释了,剩下p{color: blueviolet },就会被html当 成普通文本读入,写什么显示什么(再注释的话,也是html注释的方 法),但如果在style内先注释 p{color: blueviolet },就会是/* */
3.如果三种方法都写,p自己本身>style>link(因为style离p比较近,程序由上到下执行,link被style覆盖..)
基本的选择器
标签选择器
id选择器
类选择器
通用选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>yaya</title>
<style>
/*标签选择器,所有span标签的颜色都是绿色*/
span {
color:chartreuse;
}
/*id选择器*/
#span2 {
color: red;
}
#span1 {
font-size:24px;
color:rebeccapurple;
}
/*类选择器*/
.c1 {
color:orange;
}
/*通用选择器*/
* {
color:blue;
}
</style>
</head>
<body>
<span id="span1">span</span>
<div class="c1">
div
<p style="color: brown ">
div里的p
<span class="c1" id="span2">在div里p里的span</span>
</p>
</div>
<div class="c1">div</div>
<p>外面的p</p>
</body>
</html>
注意:
1.body里面写的是div,span,p等的结构标签,在head里面写的是为body装饰 的标签style等
2.选择顺序就是加载的顺序而来的,先从自身找,如给了id 或者是class,先从自身的id或者class中找,如果写了id和class,会找id的,因为id的精确度比较高,如果什么都没写会先找标签选择器里面的,如果没写标签选择器,会找通用选择器,没有会找父类中的子类如 div里的p里的style="color: brown ",没有会找div class="c1"
3.样式类名不要用数字开头（有的浏览器不认）
4.标签中的class属性如果有多个，要用空格分隔
组合选择器
后代选择器
儿子选择器
毗邻选择器
弟弟选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>yaya</title>
<style>
/*后代选择器 div里面所有的span标签都变成粉色 子子孙孙*/
div span{
color:palevioletred;
}
/*!*儿子选择器*! 不包括儿子的儿子*/
div>span {
color: #769B36;
}
/*毗邻选择器 对下不对上*/
/*选择所有紧接着<div>元素之后的一个<span>元素*/
div+span{
color:blue;
}
/*弟弟选择器 对下不对上*/
/*选择所有紧接着<div>元素之后的<span>元素*/
div~span{
color:darkcyan;
}
</style>
</head>
<body>
<span>我是div上面的第一个span</span>
<div>
<span>我是div里的第一个span</span>
<p>我是div里面的第一个p
<span>
我是div里面的第一个p里面的span
</span></p>
<span>我是div里的第二个span</span>
</div>
<span>我是div下面的第一个div</span>
<span>我是div下面的第二个span</span>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>yaya</title>
<style>
/*只要有xxx属性名的标签都找到,不管有没有属性值或者无论是什么块标签*/
[xxx]{
color: #769B36;
}
/*只要是标签有属性名为xxx并且值为1*/
[xxx='1'] {
color:brown;
}
/*规定p标签内部必须有属性名为xxx并且值为2的标签*/
span[xxx='2'] {
color: blue;
}
<!--</style>-->
</head>
<body>
<p xxx>我是p,我有属性名xxx</p>
<div xxx="1">我是div ,属性名为xxx,属性值为1</div>
<p xxx="2">我是p,属性名为xxx,属性值为2</p>
<span xxx>我只有属性名</span>
<span xxx="1">我有属性名和属性值,并且属性值为1</span>
<span xxx="2">我有属性名和属性值,并且属性值为2</span>
</body>
</html>
分组与嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>丫丫</title>
<style>
/*分组*/
div,p,span {
color:blueviolet;
}
/*嵌套:不同的选择器可以共用一个样式
后代选择器与标签组合使用
*/
div p,span {
color:chartreuse;
}
</style>
</head>
<body>
<div>div</div>
<p>p</p>
<span>span</span>
</body>
</html>
伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>yaya</title>
<style>
a:link{
color:palevioletred;
}
a:hover {
color:yellow;
}
a:active {
color:black;
}
a:visited {
color:green;
}
input:focus {
background-color:red;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="http://www.xiaohuar.com">校花网</a>
<a href="http://www.sogo.com">搜狗</a>
<input type="text">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*p:first-letter {*/
/*color: red;*/
/*font-size: 24px;*/
/*}*/
p:before {
content: '*';
color: green;
}
p:after {
content: '?';
color: deeppink;
font-size: 48px;
}
</style>
</head>
<body>
<p>继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的</p>
<p>继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的</p>
<p>继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的</p>
<p>继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的</p>
</body>
</html>
选择器的优先级
研究选择器优先级
相同选择器 不同的引入方式 就进原则 谁越靠近标签谁输了算
不同选择器 相同的引入方式
行内样式 > id选择器> 类选择器 > 标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
color:rebeccapurple;
}
.c1 {
color: antiquewhite;
}
#p1 {
color:green;
}
</style>
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<p id="p1" class="'c1" style="color:red">www</p>
</body>
内联>id选择器>(伪类=属性选择器=类选择器)>元素选择器>通用选择器>父元素继承样式
</html>
如何修改标签样式
样式修改
宽和高
with:属性可以为元素设置宽度
height:属性可以为元素设置高度
块级标签才能设置宽度，内联标签的宽度由内容来决定
文字字体
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
字体大小
font-size
字重(粗细)
font-weight
normal :默认值,标准粗细
bold:粗细
bolder:更粗
lighter:更细
100-900:设置具体粗细,400等同于normal,而700等同于bold
inherit:继承父元素字体的粗细值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
400px;
height: 100px;
}
p {
font-family: "Sitka Banner", "Arial", sans-serif
}
p {
font-size: 16px;
font-weight: lighter;
}
</style>
</head>
<body>
<div>div</div>
<div>div</div>
<p>以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可</p>
</body>
</html>
<!--
只有块级标签才能修改宽和高,当设置的宽没有满,默认会用黄色补全,
因为块级标签就是独占一行的,黄色的部分就是margin
-->
文本颜色
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
/*color: red;*/
/*color: rgb(0,0,255);*/
/*color: #FF6700;*/
color: rgba(0,0,255,0.8);
}
</style>
</head>
<body>
<p>以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可</p>
</body>
</html>
文本的属性
text-decoration 属性用来给文字添加特殊效果。
值 描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
inherit 继承父元素的text-decoration属性的值
常用的为去掉a标签默认的自划线：
a {
text-decoration: none;
}
文字对齐
text-align 属性规定元素中的文本的水平对齐方式。
值 描述
left 左边对齐 默认值
right 右对齐
center 居中对齐
justify 两端对齐
首行缩进
将段落的第一行缩进 32像素：
p {
text-indent: 32px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
/*text-align: right;*/
/*text-decoration: underline;*/
/*text-decoration: overline;*/
text-decoration: line-through;
text-indent: 48px;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<p>以把多个字体名称作为</p>
<a href="http://www.xiaohuar.com">笑话网</a>
</body>
</html>
背景属性
/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
*/
background-repeat: no-repeat;
/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/
支持简写
background:#336699 url('1.png') no-repeat left top;
滚动背景图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动背景图实例</title>
<style>
.d1 {
height:500px;
background-color:tomato;
}
.box {
100%;
height:500px;
background:url(2..PNG) center center;
background-attachment: fixed;
}
.d2 {
height: 500px;
background-color:steelblue;
}
.d3 {
height:500px;
background-color:mediumorchid;
}
</style>
</head>
<body style="height: 2000px">
<div class="d1"></div>
<div class="box"></div>
<div class="d2"></div>
<div class="d3"></div>
</body>
</html>
边框
边框属性
- border-width
- border-style
- border-color
#i1 {
border- 2px;
border-style: solid;
border-color: red;
}
通常使用简写方式：
#i1 {
border: 2px solid red;
}
边框样式
| 值 | 描述 |
|---|---|
| none | 无边框。 |
| dotted | 点状虚线边框。 |
| dashed | 矩形虚线边框。 |
| solid | 实线边框。 |
除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：
#i1 {
border-top-style:dotted;
border-top-color: red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
}
画圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
200px;
height:200px;
background-color:red;
border:3px solid black;
border-radius:50% ;
}
</style>
</head>
<body>
<div style="'"></div>
</body>
</html>
display属性
用于控制HTML元素的显示效果。
display:"none" :HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block" :默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline":按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属 性都不会有什么影响。
display:"inline-block": 使元素同时具有行内元素和块级元素的特点。
display:"none"与visibility:hidden的区别：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
display: none;
}
/*inline将块儿级标签变成行内标签*/
div {
display: inline;
}
span {
display: block;
}
/*将选择的标签既具有行内标签特点又有块儿级标签的特点*/
span {
display: inline-block;
height: 400px;
400px;
background-color: red;
border: 3px solid black;
}
</style>
</head>
<body>
<div>div</div>
<div>div</div>
<span>span</span>
<span>span</span>
</body>
</html>
总结
CSS：层叠样式表
注释: /*写注释*/
语法结构:
选择器 {属性:'属性值';
属性1:'属性值1';
}
选择器
基本选择器
标签选择器
div {color:red}
id选择器
#d1 {color:red}
类选择器
.c1 {color:red}
通用选择器
* {color:red}
组合选择器
后代选择器
div span {color:yellow}
儿子选择器
div>span {color:red}
毗邻选择器
div+span {color:red}
弟弟选择器
div~span {color:red}
属性选择器
任何标签都可以设置自定义的属性及属性值
[xxx]
[xxx='1']
span[xxx='1']
分组与嵌套
div,span,p {color:red}
div,#d1,.c1 {color:red}
伪类选择器
a:link{}
a:hover{}
a:active{}
a:visited{}
input:focus{}
伪元素选择器
p:first-letter{font-size:24px}
p:before {
content:'#',
font-size:24px
}
p:after {
content:'?',
font-size:24px
}
选择器优先级
行内样式 > id选择器 > 类选择器 > 标签选择器
长宽:
width
heigth
字体属性
font-family
font-size
font-weigth
背景
背景颜色
背景图片
如果背景图片尺寸小于所在的区域尺寸那么默认情况下
是铺满整个区域
可以通过指定参数来控制是否铺满
no-repeat
repeat-x
repeat-y
center center
15px 20px
backgroud:背景颜色 背景图片 是否铺满 位置
文字属性
text-align:center;
text-decoration:none; 主要就是用于去除a标签自带的下划线
text-indent:48px; 用于首行缩进
ul {list-style-type:none}
边框
border-style
border-size
border-color
border:3px solid red;
border-left:3px solid red;
border-top:3px solid red;
border-right:3px solid red;
border-bottom:3px solid red;
display
div {display:none} 不显示不占位
inline
block
inline-block 让行内标签也能设置长宽
画圆
div {border-radius:50%;}