PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > css基本知识

css基本知识

飞天001
飞天001 原创
2023年03月03日 20:28:26 234浏览

1. 认识css

  • css的基本构成:选择符,属性,属性值
    例:p{color:#ff0000}
  • css对大小写不敏感,推荐使用小写
  • 属性与属性值之间用:分开,多个属性用;间隔。
  • css中注释方式:/* 注释内容 */

2. 放置css的几种方式

  • 内联样式(行内引用)
    1. <p style=""></p>
  • 内嵌样式(内部引用)
    1. <!doctype html>
    2. <html>
    3. <title></title>
    4. <head>
    5. <style>
    6. p{
    7. color:#ff0000;
    8. fontsize:15px;
    9. }
    10. </style>
    11. </head>
    12. </html>
  • 外联样式(外部引用)
    1. <!doctype html>
    2. <html>
    3. <head>
    4. <link rel="stylesheet" type="text/css" href="css文件地址">
    5. </head>
    6. </html>

3. CSS选择器

(1). 基本选择器

  • 类选择器(class选择器)

    • 在css中用.来查找。(类选择器中可以多个属性,用空格分开)
  • 唯一选择器(ID选择器)

    • 在css中用#查找。
  • 通配符选择器(*)

    • 匹配所有标签
  • 标签选择器

    • 根据html中的标签来选择对应的标签名,这个时候该页面的所有该标签都会被选择。

(2). 层级选择器

  • 组合选择器。多个选择器用逗号分开:选择器1,选择器2,选择器3。如:div,p

  • 包含选择器。选择器1 选择器2。表示选择器1包含选择器2。如:div p

  • 子选择器。选择器1>选择器2.表示选择器1的子元素为选择器2.如:div>p

  • 相邻选择器。选择器1+选择器2.表示选择紧贴在选择器1之后的选择器2元素.如:div+p

  • 兄弟选择器。选择器1~选择器2。表示选择器1后面的所有兄弟元素选择器2.如div~p

(3). 属性选择器

  • 属性选择器:就是通过属性名或者属性值来查找某个元素。

  • 名称介绍

    • E element 表示元素标签
    • ATT attribute 表示属性
    • VAL value 表示属性值
  • 标签[属性]

    • E[ATT] , 表示匹配所有具备ATT属性的 E元素,不考虑属性值。
    • E[ATT=VAL], 匹配所有ATT属性的值等于VAL的E元素。
    • E[ATT~=VAL] 匹配所有ATT属性具有多个空格分隔的值,其中一个值等于VAL的E元素。
    • E[ATT|=VAL],匹配所有ATT属性具有多个连接分隔符的值,其中一个值以val-开头的E元素,主要用于lang属性。比如:’en-us’,’en-gb’(了解即可)。
    • E[ATT^=VAL],属性ATT的值以VAL开头的E元素。
    • E[ATT$=VAL],属性ATT的值以VAL结束的E元素。
    • E[ATT*=VAL],属性ATT的值包含VAL的E元素。
    1. input[type="text"]{
    2. border:1px solid red;
    3. }

(4). 结构性伪类选择器

  • 伪元素选择器(不是真正的元素选择)

    • E:first-line E元素的第一行
    • E:first-letter E元素的第一个字母
    • E:before E元素的内容之前
    • E:after E元素的内容之后
  • 结构性伪类选择器

    (内容待添加)

(5). 状态伪类选择器

  1. :link 设置超链接a在未被访问前的样式
  2. :hover 设置元素在鼠标悬浮时候的样式(适用于所有元素,不限于超链接)
  3. :active 设置超链接被a被激活时的样式(点了鼠标还没放开的时候状态)
  4. :visited 设置超链接a被访问过的样式

(6). 选择器优先级

  • 内联样式,优先级1000
  • id选择器,优先级100
  • 类和伪类,优先级10
  • 元素选择器,优先级1
  • 通配符选择器,优先级0

当包含多种选择器时,需要多种选择器的优先级相加后再做比较.选择器的优先级不会超过最大优先级数量级1000,如果选择器的优先级一样,则使用靠后的样式。
并集(组合)选择器的优先级是单独计算。
如果在样式的最后加上 !important,优先级则为最高,超过内联样式。所以在开发中,尽量避免使用。

4. CSS的基本属性

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议