css选择器
1.儿子选择器(大于号)
div>p {}
2.后代选择器(空格)
div p {}
3.毗邻选择器(加号):同级别紧挨着的下一个
div+p {}
4.弟弟选择器(数字1左边的键)
div~p {}
(上述的案例使用的都是标签选择器 其实也可以切换为任意选择器)
小练习
#d1>p {}
找id为d1标签内部所有的儿子p
.c1 .c2 {}
找class为c1标签内部所有class为c2的后代标签
div>.c1 {}
找div标签内部class为c1的儿子标签
.c1+#d1 {}
找class为c1标签同级别紧挨着的id为d1的标签
"""
HTML标签除了可以有自带的属性之外还支持自定义属性
<p id='d1' class='c1' name='jason' age=18 xxx=yyy></p>
"""
# 关键性的符号就是中括号
[name] {color:red}
查找含有属性名name的标签
[name='jason'] {color:red}
查找含有属性名name并且属性值是jason的标签
p[name='jason'] {color:red}
查找含有书名name并且属性值是jason的p标签
# 分组(逗号隔开 同级别) 找p标签、div标签、span标签
p,div,span {
color:yellowgreen;
}
# 嵌套(不同的选择器可以混合使用) 找id=d1、class=c1、div标签
#d1,.c1,div {
color:yellowgreen;
}
div.c1 {} # 找class=c1的div标签
# 以链接标签为例
1.未点击状态(了解)
a:link {
color:blue;
}
2.悬浮状态(掌握)
a:hover {
color:red;
}
3.点击状态(不松开)(了解)
a:active {
color:green;
}
4.点击之后的状态(了解)
a:visited {
color:pink
}
# 以input为例 获取焦点状态(聚焦) (掌握)
input:focus {}
# 通过css代码给html标签添加文本内容或者修改
# 改变文本第一个字
p:first-letter {
font-size:48px;
color:red;
}
# 在文本开头添加内容
p:before {
content:'#';
color:red;
}
# 在文本末尾添加内容
p:after {
content:'?';
color:blue;
}
(该知识点在浮动中应用)
1.相同选择器不同位置
就近原则(谁离我更近我就听谁的)
2.不同选择器不同位置(谁指定的目标更精确听谁的)
行内式(了解) > id选择器 > 类选择器 > 标签选择器
(优先级也可以打破 需要借助于关键字)
!important(尽量不要使用)
1.长宽
width height
# 行内标签无法设置长宽 完全取决于内部文本
2.字体大小
font-size
3.字体颜色
第一种: color:red
第二种: color:#4d4d4d
第三种: color:RGB(128,128,128)
"""
如何利用常见软件取色
1.qq微信截图自带三基色取色(alt+a,鼠标下会显示鼠标指的颜色)
RGB(128,128,128)
2.利用浏览器自带的取色器取色(查看编码)
#4d4d4d
"""
1.文字对齐(掌握)
text-align:center
2.文字装饰(重要)
text-decoration:none # 主要用于a标签取出自带的下划线
3.首行缩进(了解)
text-indet:32px
1.背景色
background-color:RGB(255,160,0);
2.背景图片
background-image:url('111.png');
3.不自动填充(正常状态下背景大下大于图片大小会自动复制填充数张图片)
background-repeat:no-repeat;
4.图片居中
background-position:center
/*如果多个参数都是相同的前缀 那么可以简写*/
background:#336699 url('111.png') no-repeat center center;
原文地址:https://www.cnblogs.com/wyhb/p/15098921.html
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- PHP基础编程之鬼斧神工的正则表达式-正则表达式基本语法+简单实例
- PHP+mysql数据库简单分页实例-sql分页
- PHP基础编程之鬼斧神工的正则表达式-正则表达式初探+常用的正则表达式函数
- php基础编程-php连接mysql数据库-mysqli的简单使用
- (数据科学学习手札91)在Python中妥善使用进度条
- MySQL 数据库表分区.
- RMI 远程方法调用
- MyBatis版本升级导致OffsetDateTime入参解析异常问题复盘
- 我靠(call) ,我的未来(Future)在哪里???
- Flutter中ListView加载图片数据的优化
- Python 实现随机森林预测宽带客户离网(附源数据与代码)
- 嘿,你知道新冠疫情现在什么样了吗?
- 关于双目立体视觉的三大基本算法及发展现状的总结
- 权限维持之打造不一样的映像劫持后门
- SM3加密算法开源项目推荐