目录
css层叠样式表
CSS主要是用来调节html标签的各种样式
'''
思考:页面都是由HTML构成的 并且页面上有很多相同的HTML标签，但是相同的标签在不同的位置可能会有不同的样式 我们如何区分标签
标签的两大重要属性>>>>:区分标签
1.class属性
分门别类 主要用于批量查找
2.id属性
精确查找 主要用于点对点
'''
先学习如何查找标签
再学习如何调整样式
1.css语法结构
选择器 {
样式名:样式值
样式名:样式值
}
2.css注释语法
/*注释内容*/
3.引入css的多种方式
head内style标签 内部编写(仅供学习时候使用)
head内link标签引入 (标准的方式)
标签内部通过style属性直接编写(不推荐)
css选择器
1.css基本选择器
1.通过标签进行选择
div {
color:red;
}
p {
color:#33333
}
'这样会直接改变整个标签的样式'
类选择器 按照标签上的class值来查找标签
.c1 {
color:green
}
'通过.的方法 查找同一类的标签 统一改变标签的样式'
id选择器 根据标签上的id值 精准的查找到该标签
#d1 { color:yellow }
'通过#的方法 查找属于该id的标签 单独改变该标签的样式'
2.CSS组合选择器
大多数我们的标签都会有互相的嵌套
例如：
<p>我是div的兄弟</p>
<div>
<p>
我是div的儿子
</p>
<div>
<p>
我是div的后代
</p>
</div>
</div>
<p>我是div的兄弟</p>
针对标签的上下层以及嵌套有另外的说法
父标签 后代标签 子标签 弟弟标签 哥哥标签 祖先标签
可以通过关系精确选择
1.后代选择器(空格):
div span {
color:red;
}
# 使用标签名加空格的形式获取
2.儿子选择器(大于号):
div>p { color:yellow }
3.毗邻选择器(加号)
div+span {
color: yellow;
}
4.弟弟选择器(小波浪号)
div~span {
color: yellow;
}
混合查找
已,号区分可同时查找多个
div,p,span { color: red} 多个选择器混合查找
#di, .c1, span {color:red}
查找 id为di的标签 和 calss属性为c1 还有 span标签
div.c1 { 查找class含有c1的div
color: red;
}
div#d1 { 查找id是d1的div
color: red;
}
.c1 p.c2 { 查找含有c1样式值里面的含有c2样式值的p标签
color: antiquewhite;
}
4.属性选择器
/*[username] {*/ 按照属性名查找
/* color: red;*/
/*}*/
/*[username='jason'] {*/ 按照属性名等于属性值
/* color: yellow;*/
/*}*/
div[username='jason'] {
color: darkcyan;
}
伪类选择器
5.伪类选择器
"""a标签补充说明 针对没有点击过的网址 默认是蓝色 点击过的则为紫色"""
a:hover {
color: orange;
}
input:focus { input获取焦点(被点击)之后采用的样式
background-color: red;
}
6.为元素选择器
/*p:first-letter {*/
/* font-size: 48px;*/
/* color: red;*/
/*}*/
p:before { css添加文本无法正常选中
content: '嘿嘿嘿';
color: blue;
}
p:after { css添加文本无法正常选中
content: '呵呵呵';
color: red;
}
选择器生效优先级
1.选择器相同 导入方式不同
就近原则
2.选择器不同 导入方式相同
内联样式 > id选择器 > 类选择器 > 标签选择器
css字体颜色背景
字体样式
font-size:14px 24px 28px 36px 字体代码
font-weight: lighter; 字体粗细
color:三种模式
/*color: red;*/
/*color: #3d3d3d;*/
color: rgb(186,11,98);
rgba()最后一个参数还可以控制透明度 0~1
text-align: center 文本居中
text-decoration: none; 主要用于a标签取消下划线
text-indent: 32px; 首行缩进
"""
取色器工具
1.pycharm
2.截图功能
"""
背景属性
div {
width: 800px;
height: 800px;
/*background-color: red;*/
/*background-image: url("https://img2.baidu.com/it/u=167083063,1652780278&fm=253&fmt=auto&app=138&f=JPEG?w=369&h=472");*/
/*background-image: url("666.png");*/
/*background-repeat: no-repeat;*/
/*background-repeat: repeat-x;*/
/*background-repeat: repeat-y;*/
/*background-position: center center;*/
background: url("666.png") blue no-repeat center center;
}
当多个属性名有相同的前缀 那么可以简写一次性完成