css基本知识

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
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的基本属性(1). 字体属性
  • color：字体颜色
  • font-style：字体的样式（正常或者斜体）（斜体：font-style:italic;）
  • font-size：字体的大小
  • font-family：字体族科（使用哪种字体，必须客户端存在的字体）
  • font-weight：指定字体的粗细（font-weight:bold;值也可以是数字，最大为900）
  • font-variant：设置字体为小型的大写字母（font-variant:small-caps;）
  • font 简写属性：斜体/小型大写字母/粗体/(字体/行高)/族科
  • letter-spacing：设置字的间距
  • word-spacing：设置单词的词间距（对中文无效）
  • opacity：设置颜色的透明度（值从0-1，数字越小越透明）
  • overflow | overflow-x | overflow-y 当内容溢出元素框时隐藏|自动|显示混动条
  • text-overflow 让溢出的文字以省略号显示
  • white-space 设置文字是否在同一行显示
(2).文本属性
  • text-align:元素内容对齐方式（值：默认：left，center，right）
  • text-decoration:指定文本是否有修饰，默认为none
    • underline：下划线
    • overline：上划线
    • line-through：删除线，中间划线
  • text-indent：文本首行缩进
  • text-wrap：设置当前行超过指定容器的边界时是否换行。
  • vertical-align：设置对象内容垂直的对齐方式。
  • line-height：设置对象的行高（当字体的行高和容器高度相同的时候，文本就会居中显示）
(3).背景属性
  • background-color：背景颜色 默认值：transparent透明的
  • background-image：背景图片（background-image:url(‘./img/123.jpg’);）
  • background-repeat:背景图片是否重复。
    • 默认值：repeat：背景图默认向水平和锤子方向重复。
    • repeat-x:背景图水平方向重复铺平。
    • repeat-y：背景图片垂直方向重复铺平。
    • no-repeat：不会重复
    • inherit：属性设置从父元素继承。
  • background-size：设置背景图片大小（background-size:80px 60px;）
  • background-position：设置背景图片相对于外层容器的位置。
  • background-attachment：背景图片是否随内容滚动。
  • background 背景属性简写
    1. background: #00ff00 url('smiley.gif') no-repeat fixed center;
(4).尺寸属性【本文由：大丰网站建设公司 http://www.1234xp.com/dafeng.html 复制请保留原URL】
更多阅读