CSS选择器相关知识
昨日内容回顾
-
前端与后端概念
给用户展示数据及获取用户输入数据的界面即为前端。
对数据进行处理及运算的界面即为后端。
当使用浏览器作为前端时，需要前后端都遵循HTTP协议才能实现正常交互。
-
超文本传输协议HTTP
四大特性 基于请求响应、基于TCP及IP协议作用于应用层、无状态、无连接
语句结构 请求首行(遵循协议及版本)、请求头、换行、请求体(存放敏感信息)
状态码 1开头表示正在处理请求，可继续发送请求或等待
2开头常见200 OK，表示服务端正常处理请求并成功发送响应。
3开头常见302(临时)304(永久)重定向，及跳转至新的页面。
4开头常见403请求者权限不够，404请求资源不存在。
5开头表示服务端内部错误。
-
超文本标记语言HTML
head内常见标签 title、meta、style、link、script
body内常见标签 h、p、u、i、s、b、br、hr
常见基本符号  、>、<、&
body内布局标签 div、span
body内常用标签 a(href、target)、img(src、title、alt、width/height)
列表标签 ul/ol/dl(dt/dd)
表格标签 table(thead(tr、th)、tbody(tr、td))
表单标签 form(action、method)、input(应有属性name及type属性)、select、textarea
input的type属性常见 text、password、date、email、radio、checkbox、file、submit、reset
今日内容概要
- 表单标签的补充说明
- CSS层叠样式表
- CSS选择器
- 选择器优先级
- CSS样式调节
今日内容详细
表单标签的补充说明
-
表单标签内的input标签需要同时具备name及value属性，才能被form表单发送。
-
name需要自己定义，输入类input默认输入值为value，选择类需要手动定义value。
-
标签的属性如果与属性值相同，可直接写属性名。
-
选择类型的标签可指定默认值，使用属性名为checked。
-
需要传多个值的标签需要有multiple属性。
CSS层叠样式表
CSS主要是为了给HTML文件内的标签添加个性化的样式。
为标签添加样式时，需要选定指定的标签，多个标签可能会采用相同的样式，因此，可以合理联想不同的标签应该有各种属性值以便于筛选标签。实际上，筛选标签主要通过标签的两个属性，一个是class，另一个是id。
CSS语法结构
选择器 {样式名1:样式值1;
样式名2:样式值2}
CSS注释语法
/* 注释内容 */
引入CSS的方式
- 直接在head标签内的style标签内编写CSS语句
- 通过head标签内的link标签链接CSS文件引入
- 直接在HTML标签内的style属性内编写
CSS选择器
常见选择依据
标签类别、标签类属性(.class)、标签id属性(#id)、通用选择器(*)
组合选择器(依据连接符)
空格 选择标签下所有另一标签
大于号 选择标签下一级范围内指定标签
加号 选择紧挨标签后的指定标签
波浪号 选择标签后指定标签
分组与嵌套
逗号连接 同时选择多个标签
直接连接 标签名与属性名直接连接，选择标签下含有指定属性的标签
伪类选择器
a:hover 鼠标悬停在链接上显示的样式
input: focus 选中input输入框显示的样式
伪元素选择器
p:before 段前拼接数据样式，该样式文本无法直接选中
p:after 段后拼接数据样式，该样式文本无法直接选中
选择器优先级
同级标签多次选择以最后一次选择为准。
多级标签多次选择以精确度高的优先。内联样式 > id选择器 > 类选择器 > 标签选择器
CSS样式调节
字体样式
字体常用属性：大小(size)、颜色(color)、粗细(weight)、对齐(align)、装饰(decoration)、缩进(indent)
颜色表现形式有三种：颜色英文描述、十六进制编号(#开头)、三基色浓度值(rgb)
背景属性
常见属性有：背景色(color)、图片填充(url)、图片重复填充(repeat)、位置坐标(position)
多个属性直接使用 background: 各属性描述，空格隔开
浙公网安备 33010602011771号