CSS层叠样式表
# 1. css主要用来调节html标签的各种样式
"""
如何区分标签？
标签的两大重要属性
1.class属性 ： 进行分类，主要用于批量查找
2.id属性 ： 精确查找，主要用于单对单
css学习流程：
1.学习如何查找标签
2.学习如何调整样式
"""
# 2.css语法结构
选择器 {
样式名1:样式值1;
样式名2:样式值2;
}
# 3.css注释语法
/*注释内容*/
# 4.引入css的方式(三种)
1.head内style标签内部编写
2.head内link标签引入(标准)
3.标签内部通过style属性直接编写(不推荐)
CSS选择器
# 1.css基本选择器
-1.标签选择器(直接按照标签名查找标签)
div {
color:red;
}
-2.类选择器(按照标签的class值查找标签)
.c1 {
color:green;
}
-3.id选择器(根据标签的id精准查找标签)
#d1 {
color:pink
}
-4.通用选择器(直接选择页面所有的标签)
* {
color:orange
}
例： """juejin.cn/post/7135060591453929485"""
# 2.CSS组合选择器
-1.后代选择器(查找div标签内部所有的后代span)
# new1 span {
color：aqua；
}
-2.儿子选择器(查找div标签内部的所有儿子span)
# new1>span {
color:aqua;
}
-3.毗邻选择器(查找div标签同级别下面紧挨着的一个span标签)
# new1+span {
color:aqua;
}
-4.弟弟选择器(查找div标签同级别下面所有的span标签们)
# new~span {
color:aqua;
}
# 3.属性选择器
-1.查找属性名含有name的标签
[name] {
background-color: red;
}
-2.查找属性名含有name并且值是username的标签
[name=''username] {
background-color:orange;
}
-3.查找input标签并且属性名含有name值是username的
input[name='username'] {
background-color:aqua;
}
"""
-1.所有的标签除了自己默认的属性外，还能自定义的任意属性
默认属性 id class
自定义属性 x=1 y=2
-2.前面的选择器可以是任意类型的 标签、id、class
"""
# 4.伪类选择器
"""
a标签默认的颜色有两种紫色和蓝色
紫色：链接地址已经被点击过
蓝色: 链接地址从来没被点击过
"""
-1.a标签内的文本，鼠标悬浮上去后，颜色发生变化
/*重要的(鼠标放置上去变色)*/
a:hover {
color: blue;
}
/*不重要的*/
a:link { /*未访问的链接颜色*/
color: red;
}
a:active { /*标签被点击的一刻变色*/
color: green;
}
a:visited { /*标签被访问过颜色改变*/
color: yellow;
}
# 5.伪元素选择器(通过css代码来操作标签文本内容)
"""
伪元素选择器可以用在解决标签浮动所带来的的负面影响,也可以用来做数据的防爬
"""
-1.first-letter
/* 常用的给首字母设置特殊样式：*/
p:first-letter {
font-size: 48px;
color: red;
}
-2.before
p:before {
content:"*";
color:red;
}
-3.after
p:after {
content:"[?]";
color:blue;
}
CSS样式调节
# 1.字体样式
"""块级标签才能设置宽度，行内标签的宽度是由内容决定的"""
-1.宽和高
width属性可以为元素设置宽度。
height属性可以为元素设置高度
-2.文字字体
body {
font-family: "微软雅黑"
}
-3.字体大小
p {
font-size:14px
}
-4.字的粗细
p {
font-weight:lighter;
}
-5.文本颜色
p {
color:red; # 颜色名
color:rgb(255,0,0); # RGB
color:#3e3e3e; # 16进制
color:rgba(1,1,1,0.5) # 最后一个数时0-1之间的小数，表示透明度
}
-6.文字对齐(设置文字的对齐方式)
p {
text-align:center; # 居中
}
-7.文字装饰(添加后文字有特殊效果)
a {
text-decoration: none; # 标准的文本格式
}
-8.首行缩进(将段落的第一行缩进 32像素)
p {
text-indent: 32px;
}
# 2.背景属性
-1.页面的背景色
body {
background-color: lightblue; # 背景颜色
background-image: url('1.jpg'); # 背景图片
background-repeat: no-repeat; # 背景展开方式
/*背景的位置*/
background-position: left top;
background-position: 200px 200px;
}
-2.背景的展开方式有四种：
repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
-3.背景的属性可以简写
body {
background:#336699 url('1.png') no-repeat left top;
}
标签：color,标签,前端,查找,background,选择器,css,属性 From： https://www.cnblogs.com/juzijunjun/p/16942526.html