css

id {
color: red;
}CSS

Cascading Style Sheets 层叠样式表

用于控制html标签样式

注释

/*单行注释*/
/*
多行注释1
多行注释2
*/

通常写css的时候,都会写一个单独的css文件,里面只有css代码

/*这是小米网站首页的css样式文件*/

/*通用样式*/

/*导航条样式*/

/*轮播图样式*/

css语法结构

选择器 {属性:属性值}

css的三种引入方式

1. 通过link标签引入外部的css文件(最正规的用法)

   <link rel="stylesheet" href="02%20小米css样式.css">

2. 直接在html页面上head内通过style标签直接添加css代码

   <style>
   h1 {
       color: green;
   }
   </style>

3. 行内式 直接在标签内部通过style属性直接写 不推荐使用

   <h1 style="color: orange">我是Oscar</h1>

css查找

基本选择器

• 元素选择器 元素,指标签名,span p

  span {
    color: red;
  }

• id选择器

  id {
    color: red;
  }

• 类选择器

  c1 {
    color: red;
  }

• 通用选择器 表示修改所有

  * {
    color: red;
  }

组合选择器

<span>span</span>
<span>span</span>
<div>div
    <span>div里面的span</span>
    <p>div里面的p
        <span>div里面的p里面的span</span>
    </p>
    <span>div里面最下面的span</span>
</div>

• 后代选择器 span 后代里的所有div

  span div

• 儿子选择器

  div>span 仅div下一级的span

• 弟弟选择器

  div~span 同级div代码之下的span

• 毗邻选择器

  div+span 同级div代码之下紧挨着的span

属性选择器

使用标签的属性指来进行选择

任何标签都有自己默认的属性 id class

标签还支持自定义任何多的属性(就意味着可以让标签帮忙携带一些额外的数据)

方法

1.含有某个属性名的标签

2.含有某个属性名并且属性值是...的标签

3.找p标签并且含有某个属性名并且属性值是...的标签

1.
[password] {
    color: red;
}
2.
[username='jason'] {
    color: black;
}
3.
span[username='jason'] {
    color: red;
}

分组和嵌套

分组

当多个元素的样式相同的时候,可以通过使用在多个选择器之间使用逗号分割的返祖选择器进行统一设置元素样式.

/*将div和p标签都设置为红色*/
/*为了清晰通常多个标签分开行来写*/
div,
p {
    color: red;
}

嵌套

多种选择器混合起来使用

/*.c1类内部所有的p标签都设置为红色*/
.c1 p {
    color: red;
}

伪类装饰器

/* 未访问的链接 */
a:link {
  color: red;
}

/* 鼠标移动到链接上 */
a:hover {
  color: blue;
} 

/* 选定的链接 */ 
a:active {
  color: orange;
}

/* 已访问的链接 */
a:visited {
  color: pink;
} 

/*input输入框获取焦点时样式*/
input:focus {
  outline: none;
  background-color: red;
}

/*鼠标悬浮在span样式*/
span:hover {
    background-color: pink;
}

伪元素选择器

清除浮动带来的负面影响

可以通过css添加文本内容

/*在一大段文字之前加绿色*号*/
p:before {
    content: '*';
    color: green;
}
/*在一大段文字之前加蓝色?号*/
p:after {
    content: '?';
    color: blue;
}

选择器优先级

1. 选择器相同的情况下,引入方式不同

   谁在最下面,谁有效,上面的被覆盖

2. 选择器不同的情况下

   行内选择器 > id选择器 > 类选择器 > 元素选择器

css

原文：https://www.cnblogs.com/agsol/p/11852343.html