前端基础之CSS
前端基础之CSS
CSS中文名为层叠样式表，是一种用来表现标准通用标记语言的一个应用或标准通用标记语言的一个子集等文件样式的计算机语言。
css层叠样式表
-
调整标签样式
-
语法结构
选择器
-
注释语法
/ * 注释内容 */
三种编写css的方式。
-
head种style标签内部直接编写（学习阶段使用）
<style> p {color: red;} </style> -
head中link标签引入外部Js文件（最为正规）
<head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="mycss.css"> </head> -
直接在标签内部通过style属性编写（不推荐）
<head> <meta charset="UTF-8"> <title>Title</title> <h1 style="color:yellow">h1标签</h1> </head>
css基本选择器
-
标签选择器
通过标签名来查找标签
div { color:green; } -
类选择器
通过编写的class的属性值来查找相对应的标签
.c1 { color:red } -
id选择器
通过编写的id的值来精确查找某个对应的标签
#d1 { color:black; } -
通用查找器
使用* 号表示查找所有的标签
* { color:blue; }
css组合选择器
通过选择器之间的组合精确的查找到某些标签
-
以下方代码为例，形象比喻
<body> # 算div的父亲 <p>div上面的p</p> # div的哥哥 <div id="d1">div <p>div内部的p # div的儿子 <span>span标签</span> # div的孙子 </p> </div> <p>div下面的p</p> # div的弟弟 </body> -
后代选择器
俩个选择器之间空格隔开，查找前面选择器获取到的标签内部所有符合空格后面选择器要求的标签
”查找div标签内部所有的后代包括它儿子“
/*查找div标签内部所有的span标签（后代）*/ #d1 span { color:orange } -
儿子选择器
俩个选择器之间用大于号隔开，查找前面选择器获取到的标签内部第一层级符合大于号后面选择器要求的标签
”只查找div的儿子“
/*查找div标签内部所有的儿子span标签*/ #d1>span { color:red; } -
毗邻选择器
俩个选择器之间用加号隔开，查找同一级别下面紧挨着的一个标签
/*查找div标签同级别下紧挨着的一个p标签*/ #d1+p { color:black; } -
弟弟选择器
俩个选择器之间用波浪线隔开，查找同一级别下所有符合后面选择器的标签。
/*查找div标签同级别下所有的p标签（弟弟们）*/ #d1~p { color:green; }
css属性选择器
所有的标签除了有自己默认的属性之外，还可以拥有自定义的任意属性
也就是说可以自己直接在内部设定自定义属性如： x=1 y=2 随自己设置。
默认属性 id class
属性选择器是通过标签的属性来筛选标签
/*查找属性名含有name的标签*/
[name] {
background-color:red;
}
/*查找属性名含有name并且值是username的标签*/
[name="username"] {
background-color:orange;
}
/*查找input标签并且属性名含有name值是username的标签*/
input[name="username"] {
background-color:aqua;
}
css选择器之分组与嵌套
当多个选择器查找到的标签需要调整相同的样式，那么可以合并。
选择器与选择器之间逗号隔开即可。
/*合并的选择器彼此之间不干扰也没有类型限制*/
div,p,span,input {
color:red;
}
span.c1,div#d1 {
color:orange;
}
css之伪类选择器
a标签有个特性，其默认颜色有俩种紫色和蓝色。
紫色：链接地址已经被点击过了，蓝色：链接从来没有被点击过
我们可以通过通过其它方法修改它的颜色。
/*鼠标悬浮上去之后样式改变，适用于所有含有文本的标签*/
a:hover {
color:blue;
}
/*
visited:访问后
link：访问前
hover：鼠标悬浮上去
active：被点击的那一刻
*/
css之伪元素选择器
通过css代码来操作标签的文本内容
/*伪元素选择器可以用在解决标签浮动带来的负面影响，也可以用来做数据的防爬*/
/*修改文本内容第一个元素尺寸和颜色 关键字 first-letter */
p：first-letter {
font-size: 26px; 调节文本内容大小
color：red； 改变颜色
}
/*在指定文本内容前面添加内容 关键字 before*/
p：before {
content:"内容"；
color：red；
}
/*在指定文本内容尾部添加内容 关键字 after*/
p：after {
content："内容"；
color：blue；
}
css选择器优先级
当多个选择器查找相同的标签修改不同的样式，执行的结果也是不同的。
-
选择器相同，引入位置不同
从上往下执行，可以理解为后面直接覆盖前面的 就近原则
-
选择器不同的情况
行内>>>id选择器>>>类选择器>>>标签选择器
字体样式
width属性可以为元素设置宽度、height属性可以为元素设置高度。
块级标签才能设置宽度，行内标签的宽度由内容来决定。
-
字体样式
body { font-family: "微软雅黑"; } -
字体大小
p { font-size: 16px; # 根据数字调节字体大小 } -
字体粗细
p { font-weight:lighter; } mormal： 默认值，标准字体粗细 bold： 粗体 bolder： 更粗 lighter：更细 100~900：设置具体粗细，400等同于mormal，而700等同于bold。 inherit：继承父元素字体的粗细度。
文本颜色
颜色属性被用来设置文字的颜色。
颜色式通过css最经常指定的
p {
color:red;
color:rgb(254，84，48);
color:#3e3e3e; # 十六进制值
color:rgba(1,1,1,0.5) # 0.5 调节透明度透明度
文本对齐
根据参数调整文本位置
p {
text-align:center; # 居中对齐
}
/*
left： 左边对齐，默认值
center: 居中齐
right： 右对齐
justify： 俩段
*/
文字装饰
a {
text-decoration: none;
}
/*
none: 默认，定义标准文本
underline： 文字下面加一条线
overline： 文字上面加一条线
line-through： 文字中间穿过一条线
inherit： 继承父元素的text-decoration属性的值
*/
文字首行缩进量
p {
text-indent: 32px;
}
背景属性
如果多个属性名有相同前缀的时候可以简写为background
div {
height: 400px;
width:800px ;
background-color: red;
background-image: url("图片来源");
background-repeat: repeat-x;
background-repeat: repeat-y;
}
/*背景颜色*/
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;*/
边框属性
<head>
<meta charset="UTF-8">
<title>哈哈哈</title>
<script src="jQuery3.6.js" ></script>
<style>
div {
width: 500px;
height: 400px;
background: red;
/*设置标签上边框 */
border-top-width: 5px; /*大小*/
border-top-color: red; /*颜色*/
border-top-style: dotted; /*样式*/
}
</style>
</head>
<body>
<div></div>
</body>
/*
简写单边框设置
border - top： 10px solid red； 指定设置上边框
border - left：10px solid red； 指定左边框
border-right: 20px dotted black; 指定右边框
border-bottom: 20px dotted orange; 指定下边框
简写总体边框设置
border: 5px（边框尺寸） solid（边框样式） black（边框颜色）; 设置四周边框属性
none： 无边框
dotted： 点状虚线边框
dashed： 矩形虚线边框
solid： 实现边框
设置圆形边框
border-radius: 50%; 直接写50%即可 长宽一样就是圆 不一样就是椭圆
*/
display属性
隐藏属性，控制标签的显示效果
input {
display:none;
}
display:none /*隐藏标签，html文档中存在，但是浏览器中不会显示也无法使用到*/
盒子模型
标签之间的距离 外边距（margin）
标签的边框 边框（border）
内部文本与边框的距离 内边距（padding）
标签内部的内容 内容（content）
div {
margin-top: 20px;
}
margin-top: 20px;
margin-left: 100px;
margin-right: 100px;
margin-bottom: 100px;
/* body标签自带8px的外边距*/
margin:0; 简写形式 作用于上下左右
margin: 10px 20px; 上下 左右
margin: 10px 20px 30px; 上 左右 下
margin: 10px 20px 30px 40px; 上 右 下 左
/*margin还可以让内部标签居中展示
margin:100px auto 仅限于水平方向
padding使用方式与margin一致
*/
浮动布局
float:left\right 页面布局必不可少的操作
浮动会造成父标签塌陷 这是一个不好的现象 因为会引起歧义
解决浮动造成的父标签塌陷
.clearfix:after {
content: '';
display: block;
clear: both;
}
提前写好上述的css操作 遇到标签塌陷就给标签加clearfix类值即可
如下：
<div class="clearfix"></dic>
"""浏览器针对文本是优先展示的(浮动的元素如果遮挡会想办法展示)"""
溢出属性
当内部内容比整个标签还要大需要使用overflow来控制内容展示大小
/*
overflow：visible 默认值，内容不会被修剪，会呈现在元素框之外
overflow：hidden 内容会被修剪，其余内容是不可见的。
overflow：scroll 内容会被修剪，但是浏览器会显示滚动条滑动滚动条查看剩余内容
overflow：auto 如果内容被修剪，则浏览器会显示滚动条以便于查看其余内容
overflow：inherit 规定应该从父元素继承overflow属性的值
*/
div {
height: 50px;
width: 50px;
border: 5px solid gold;
border-radius: 50%;
overflow: hidden;
}
div img {
max-width: 100%;
}
定位
div {
height: 50px;
width: 50px;
position:relative;
top:200px
left:200px
}
/*
static(静态)
所有的标签默认都不能直接通过定位修改位置 必须要切换成下面三种之一
relative(相对定位)
相对于标签原来的位置做定位
absolute(绝对定位)
基于已经定位过的父标签做定位(如果没有父标签则以body为参照)
fixed(固定定位)
相对于浏览器窗口做定位
*/
Z-index属性
浏览器界面其实是一个三维坐标系
/*z-index 值表示谁压着谁，数值大的压盖住数值小的*/
#d1 {
z-index:999;
}
浙公网安备 33010602011771号