【前端】CSS基础学习
CSS选择器(Cascading Style Sheet，层叠样式表)
css代码引入
方式1
head标签里面写
<style>
div{
background-color: red;
height: 100px;
width: 100px;
}
</style>
方式2
内敛样式:
<div style=" height: 200px;width: 200px;"></div>
方式3
外部文件引入
head标签里面写link标签
<link rel="stylesheet" href="文件路径">
css选择器
基本选择器
元素选择器:
div{ #标签名字
color:red;
}
id选择器:id值不能重复
<div id="xuefei">
雪飞大美女
</div>
#xuefei{
color:green;
}
类选择器: 类值可以重复
<div id="dazhuang" class="c1">
大壮dsb
</div>
<div id="xuefei" class="c1">
雪飞大美女
</div>
.c1{
color: green;
}
div.c1{ #div标签里面含有class值为c1的标签
color: green;
}
通用选择器
*{ #找到所有的标签
color: green;
}
组合选择器
后代选择器
div a{ #找到div标签后代里面的所有a标签
color:red;
}
儿子选择器
div>a{ #找到div的儿子标签这一代的a标签
color:red;
}
毗邻选择器
div+a{ #找到是紧挨着div标签的下一个标签(是兄弟标签)
color: red;
}
弟弟选择器
div~a{ #找到的是同级的后面的所有兄弟标签
color: red;
}
属性选择器
#通过属性名来查找
[title]{ #找到所有含有title属性的标签
color: red;
}
div[title]{ #含有title属性的div标签
color: red;
}
#通过属性名对应的值来查找,当属性值的值为数字的时候,数字要加上引号[title='666']
input[type=text]{ #含有type属性,并且type属性的值为text的input标签
}
分组
多个选择器选择的标签设置相同css样式的时候,就可以用分组
div,p{ #div选择器和p选择器共同设置相同的样式,可以逗号分隔
color:red;
}
伪类选择器
a标签自带的效果:未访问过的时候是蓝色的字体颜色,访问过之后是紫色的,自带下划线
/* 未访问的链接 */
a:link {
color: #FF0000
}
/* 已访问的链接 */
a:visited {
color: #00FF00
}
/* 鼠标移动到链接上 */ 这个用的比较多,可以应用在其他标签上
a:hover {
color: #FF00FF
}
/* 选定的链接 */ 就是鼠标点下去还没有抬起来的那个瞬间，可以让它变颜色
a:active {
color: #0000FF
}
/*input输入框获取焦点时样式*/
input:focus { #input默认的有个样式，鼠标点进去的时候，input框会变浅蓝色的那么个感觉
#outline: none;
#框里面的背景色
}
伪元素选择器
/*伪元素选择器*/
div:first-letter{
color: red;
font-size: 20px;
}
/*在p标签内容的前面插入一些内容*/
p:before{
content: '?';
color: green;
font-size:100px;
}
/*在p标签内容的后面插入一些内容*/
p:after{
content: '哈哈!';
color: pink;
}
选择器的优先级
/*优先级数字越大,越优先显示其效果,优先级相同的,显示后面定义的选择器对应的样式*/
/*id选择器优先级为100*/
/*#d1{*/
/*color:deepskyblue;*/
/*}*/
/*!*继承的优先级为0*!*/
/*body{*/
/*color:red;*/
/*}*/
/*!*类选择器的优先级是10*!*/
/*.c1{*/
/*color: blue;*/
/*}*/
/*.c2{*/
/*color: orange;*/
/*}*/
/*!*元素选择器优先级是1*!*/
/*div{*/
/*color: green;*/
/*}*/
内敛样式优先级为1000
<p class="cc3" style="color: red;">我是cc3的p标签</p>
important优先级最高,最牛逼
.cc1 .cc3 {
color: purple!important;
}
css属性相关
高度宽度设置,注意:只有块级标签能够设置高度宽度,内敛标签不能设置高度宽度,它的高度宽度是由内容决定的
div{
width: 100px; 宽度
height: 100px; 高度
}
补充:a标签的字体颜色设置必须选中a标签才行
.c1 a{
color: red;
}
字体属性
字体
.c1{
font-family: '楷体','宋体','微软雅黑';
}
字体大小
.c1{
/*font-family: '楷体','宋体','微软雅黑';*/
font-size:14px; 默认字体大小为16px.
}
字体颜色
color:red;
子重,粗细
.c1{
font-weight: bold;
font-weight: 100;
}
值 描述
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bold
颜色表示方式
p{
/*color: red;*/
/*color: #78FFC9;*/
/*color: rgb(123,199,255);*/
color: rgba(123,199,255,0.3); 多了一个透明度的数字:0-1的一个数字
}
文字属性
文字对齐
text-align
div{
width: 200px;
height: 200px;
background-color: yellow;
/*text-align: center;*/
text-align: right;
}
left 左边对齐 默认值
right 右对齐
center 居中对齐
文字装饰
text-decoration
div a{
/*text-decoration: none;*/ #给a标签去除下划线
/*text-decoration: line-through;*/
text-decoration: overline;
}
值 描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
首行缩进
p {
text-indent: 32px; #首行缩进两个字符，因为我记得一个字在页面上的默认大小为16px
}
背景属性
背景颜色
background-color: red;
div{
width: 600px;
height: 600px;
/**/
/*background-image: url("yeye.jpg");*/
/*background-repeat: no-repeat;*/
/*background-position: 100px 50px;*/ 相对于div标签的,距离左边100px,距离上面50px
background:url("yeye.jpg") no-repeat left center;
/*background-position: right top;*/
}
简写方式,颜色 图片路径 是否平铺 图片位置
background:#ffffff url('1.png') no-repeat right top;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: red;
height: 500px;
width: 200px;
}
.c2{
background-color: green;
height: 500px;
width: 200px;
}
.s1{
position: fixed; /*固定定位,位置是根据浏览器窗口来的*/
/*top:20px;*/
left: 20px;
bottom: 20px;
background-color: blue;
height: 40px;
width: 80px;
text-align: center;
line-height: 40px; /* 和标签高度一致,标签内容就垂直居中 */
}
.s1 a{
color: white;
text-decoration: none;
}
</style>
</head>
<body>
<!--<a name="top">这里是顶部,亲爱的</a>--> <!-- 锚点 -->
<div id="top">这是顶部</div> <!-- 锚点 -->
<div class="c1"></div>
<div class="c2"></div>
<span class="s1">
<a href="#top">回到顶部</a> <!-- 触发锚点 -->
</span>
</body>
</html>
锚点设置的两种方式
<!--<a name="top">这里是顶部,亲爱的</a>--> <!-- 锚点 -->
<div id="top">这是顶部</div> <!-- 锚点 -->
触发锚点的a标签写法
<a href="#top">回到顶部</a> <!-- 触发锚点 -->
