css介绍与用法

最新推荐文章于 2023-11-10 17:34:25 发布

十二与木木

最新推荐文章于 2023-11-10 17:34:25 发布

阅读量157

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/qq_43733612/article/details/120268718

版权

1.css3介绍

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现：可以将文档以更优雅的形式呈现给用户。

当一个浏览器在显示文档的时候，需要将文档内容和样式内容结合到一起，以此，在处理文档的时候包含两个阶段：浏览器将HTML和CSS转换为DOM (Document Object Model)，DOM在计算机内存中表示文档，使得文档和CSS结合。

2.css3语法

CSS声明（CSS declarations） CSS语言的核心功能就是为特定的属性设定特定的值，CSS引擎通过计算出声明的每个属性来显示元素。CSS的属性和值都是大小写敏感的。属性与值通过“:”分隔开。并不是所有的值都适用于同一个属性，不同的属性有一系列不同的值。

3.HTML中使用CSS的方式

3.1.行内样式

将css规则写到元素的style属性中
<p style="color:red;">This is my first CSS example</p>

3.2.内联样式

将样式集中写在style标签中，通过选择器选中元素，然后为这些元素指定规则
<head> 
 <style>
    #one, #two{
      background-color:lightcoral; 
      color: #fff; 
      width: 300px;
      margin-bottom: 1em;
    }
 </style>
</head>

3.3.外部导入

将样式集中写在一个css文件中，通过link标签将这个css加载到html中。
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
</html>

4.css3选择器

4.1.核心选择器

1.)标签选择器

又叫元素选择器，是最基本的选择器，使用元素名称直接选中元素。通过元素名称进行选择，使用频率比较高的一个选择器，当时选择范围比较大，一般用于设定一些公共样式，例如，重置元素默认样式，设置全局样式。
 /*利用标签名进行选择*/
 div {}     /*选中所有的div元素*/
2.)id选择器利用了html元素的id属性，唯一
#one {}  /*选中id为one的元素*/
3.）class选择器利用html元素的class属性，非唯一
.box {} /*选中class为box的元素*/
4.）并且选择器

并且选择器是多个选择器共同配合使用，到达精确选择的目的。此外还可以让开发者明确文档结构。
ul.nav {}   /*选中class为nav的ul标签*/
5.）和选择器多个选择器组合使用，使用“,”分割。
ul,.nav {}   /*选中class为nav的元素、ul元素*/
6.）普遍选择器使用"*”来表示普遍选择器，表示选择所有元素，通常用在组合选择器中
div.menu > *{} /*选中class为menu的div的所有子元素*/

4.2.层次选择器（两个选择器配合使用）

1.）子选择器

使用 “>” 隔开两个选择器，前一个选择器选择到父元素，后一个选择器对子元素进行过滤
ul.menu > li {}   /*选中class为menu的ul标签的所有li子元素*/
2.）后代选择器

使用 "空格" 隔开两个选择器，前一个选择器选择到父元素，后一个选择器对后代元素进行过滤。包含子元素、孙子元素...
ul.menu li {}   /*选中class为menu的ul标签的所有后代li元素*/
3.）兄弟选择器

使用"+"隔开两个选择器，表示下一个兄弟；使用"~"隔开两个选择器，表示之后所有兄弟
ul.menu>li:nth-child(2) + li{}  /*class为menu的ul的第二个子元素li的下一个兄弟*/

ul.menu>li:nth-child(2) ~ li{}  /*class为menu的ul的第二个子元素li的后边所有兄弟

4.3.属性选择器（属性过滤器）

      input[name]
        具有name属性input元素
      input[name='username']
        具有name属性，并且name属性值为username的input元素
      input[name^='u']
        具有name属性，并且name属性值以'u'作为开始
      input[name*='u']
        具有name属性，并且name属性值包含'u'
      input[name$='u']
        具有name属性，并且name属性值以'u'作为结尾
/**选择input元素，并且该元素具有name属性*/
input[name]{}

/*选择input元素，并且该元素中的name属性值为username*/
input[name=username] {}

/*选择input元素，并且该元素中的name属性值包含username*/
input[name*=username] {}

/*选择input元素，并且该元素中的name属性值以u开头*/
input[name^=u] {}

/*选择input元素，并且该元素中的name属性值以u结尾*/
input[name$=u] {}

4.4.伪类选择器

    伪类以" : "开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中。

1）.子元素相关

:only-child      选中独生子元素

:first-child      选中作为父元素的第一个孩子的元素

:last-child       选中作为父元素的最后一个孩子的元素

:nth-child(n)     选中作为父元素的第几个孩子元素的元素

:nth-last-child(n)选中作为父元素的倒数第几个孩子的元素

:first-of-type      选中作为父元素的每种类型中的第一个孩子的元素

:last-of-type 选中作为父元素的每种类型中的最后一个孩子的元素

:nth-of-type(n)     选中作为父元素的每种类型中的第几个孩子的元素

:nth-last-of-type(n) 选中作为父元素的每种类型中的倒数第几个孩子的元素

2.)元素状态相关

:link                    未被访问的状态，常用于a标签

:visited    已访问过的状态，常用于a标签

:hover 鼠标悬停的状态，常用于a标签，其他标签也可用

:active                 激活的状态，常用于a标签，其他标签也可用:focus聚焦的状态

:checked             用户选中的单选按钮和复选按钮

:default                默认选中的单选按钮和复选按钮

:enabled、:disabled   可用的表单控件、禁用的表单控件

:valid 、:invalid          通过验证的、不通过验证的

:required、:optional        必填的和选填的

:in-range 、:out-of-range    在范围内的、在范围外的
a:link {color: red;}/* 未访问 */
a:visited {color: black;}/* 访问过 */
a:hover {color: gold;}/* 悬停 */
a:active {color: blue;} /* 点击活动 */

4.5.伪元素选择器

伪元素以" :: "开头，用在选择器后，用于选择指定的元素。

::after 在选中元素内部所有孩子元素后面追加一个子元素

::before 在选中元素内部所有孩子元素前面插入一个子元素

::first-letter选中第一个文本字符

::first-line 选中第一行文本

::selection选中用户在选择的时候的文本
ul.menu::after {

      }/*在class为menu的ul元素中追加一个子元素*/

ul.menu::before {

      }/*在class为menu的ul元素中插入一个子元素*/

5.选择器优先级

       当多个选择器中的相同规则作用于同一个元素的时候，我们纠结到底这个元素上使用哪个规则的时候。

1. ）权重（积分）
1000 style
100       id
10        class、伪类
1          元素选择器、伪元素
/*1+10+1+10+1+10+1*/
ul.menu > li.menu_item > ul.sub_menu > li {
        color: lightcyan; /* 34*/
}

#introduce {
        color:lightcoral    /*100*/
}
2. 顺序（排名）
当权重值相同的情况下，后者覆盖前者

3. 特权（!important）
脱离了权重和顺序规则
.si {
        color: gray !important;
}/* !important拥有特权 */

十二与木木

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css介绍与用法

1.css3介绍层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现：可以将文档以更优雅的形式呈现给用户。当一个浏览器在显示文档的时候，需要将文档内容和样式内容结合到一起，以此，在处理文档的时候包含两个阶段：浏览器将HTML和CSS转换为DOM (Document Object Model)，DOM在计算机内存中表示文...
复制链接

扫一扫