首页 > 其他分享 >CSS选择器相关知识

CSS选择器相关知识

时间:2022-12-01 22:13:15浏览次数:29  
标签:样式 标签 知识 input 选择器 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

    常见基本符号 &nbsp、&gt、&lt、&amp

    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样式调节

今日内容详细

表单标签的补充说明

  1. 表单标签内的input标签需要同时具备name及value属性,才能被form表单发送。

  2. name需要自己定义,输入类input默认输入值为value,选择类需要手动定义value。

  3. 标签的属性如果与属性值相同,可直接写属性名。

  4. 选择类型的标签可指定默认值,使用属性名为checked。

  5. 需要传多个值的标签需要有multiple属性。

CSS层叠样式表

CSS主要是为了给HTML文件内的标签添加个性化的样式。

为标签添加样式时,需要选定指定的标签,多个标签可能会采用相同的样式,因此,可以合理联想不同的标签应该有各种属性值以便于筛选标签。实际上,筛选标签主要通过标签的两个属性,一个是class,另一个是id。

CSS语法结构

选择器 {样式名1:样式值1;
样式名2:样式值2}

CSS注释语法

/* 注释内容 */

引入CSS的方式

  1. 直接在head标签内的style标签内编写CSS语句
  2. 通过head标签内的link标签链接CSS文件引入
  3. 直接在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: 各属性描述,空格隔开

标签:样式,标签,知识,input,选择器,CSS,属性
From: https://www.cnblogs.com/akazukis/p/16942952.html

相关文章

  • css 透明度
    .box3{width:200px;height:200px;background-color:yellowgreen;position:a......
  • 前端开发:2、CSS、表单标签补充说明
    前端开发之CSS目录前端开发之CSS一、表单标签补充说明二、CSS层叠样式表三、CSS选择器基本选择器CSS组合选择器分组嵌套属性选择器伪装选择器伪元素选择器四、选择器优......
  • 前端-CSS
    1.CSS层叠样式表CSS层叠样式表主要用来调节html标签的各种样式"""思考:页面都是由HTML构成的,并且页面上有很多相同的HTML标签,但是相同的HTML标签在不同的位置可能有不......
  • CSS层叠样式表
    目录CSS前戏1.css语法结构2.css注释语法3.引入css的多种方式CSS基本选择器1.标签选择器2.类选择器3.id选择器4.通用选择器CSS组合选择器CSS前戏主要用来调节html标签的各......
  • 表单标签补充及css层叠样式
    表单标签补充及css层叠样式一、表单知识点补充1.获取用户输入的标签两大重要属性name属性:类似于字典的键value属性:类似于与字典的值#form表单朝后端发送数据的时候,标......
  • 前段知识之CSS
    目录CSS层叠样式表CSS选择器选择器优先级CSS样式调节CSS层叠样式表主要用来调节html标签的各种样式思考:页面都有HTML构成的并且页面上有很多相同的HTML标签但是相同的......
  • 前端(css)基础
    内容概要css选择器css层叠样式表(CascadingStyleSheets)css主要是用来调节HTML标签的各种样式/*我们现在的网页页面都是由HTML构成的,并且上面由很多相同的HTML标......
  • Web前端开发:CSS层叠样式表
    目录CSS层叠样式表-html标签的两大重要属性1.class属性2.id属性一、CSS语法结构1.语法结构2.CSS注释语法3.引入CSS的多种方式(1)嵌入式(2)外链式(3)内联样式二、CSS选择器1.CSS基......
  • CSS层叠样式表
    今日内容概要表单标签补充说明CSS层叠样式表如何查找标签如何添加样式今日内容详细表单标签的补充说明基于form表单发送数据1.用于获取用户数据的标签......
  • B站变成灰彩色的CSS代码
    因为一些原因,网站要变成灰色。我看其他网站就是纯黑白,但是B站是有点暗的彩色,就像暗色印刷的书,记录下,其代码如下:  1html.gray{2filter:grayscale(85%)satu......