认识CSS

你是我意料之外的意外
162 阅读5分钟

一、CSS定义

根据W3C（标准化组织，专门制定web标准）定义：

  • CSS：Cascading Style Sheets，层叠样式表，用于定义文档的样式和布局，有简单的交互效果。（表示型语言） 1998年引入CSS，目前使用的是CSS3。

二、常见CSS属性

  1. 颜色单位

    表示方式有四种：

    ①关键字

    ②HEX16进制表示法：由#后面跟3位或者6位数组成，用0-9以及大小写a-f组成，这些值映射到红、绿、蓝颜色通道。

    如：color(#ff0000)

    ③RGB值：由rgb()函数声明，每个值都是从0-255的整数，0为纯黑，255为纯白。

    如：rgb(54, 162, 255)

    rgba()函数前面三个与rgb()函数相同，但是最后一位代表饱和度，数值为0-1。

    如：rgb(65, 150, 205,0.7)

    ④HSL值：由hsl()函数声明，表示一个颜色在色环上的角度，可以调整饱和度和亮度。

  2. 长度单位

    • 绝对长度：

      ①1px的具体大小会根据设备的分辨率有所不同

      ②计算机屏幕由很多小点组成，一个点就是1px

      ③其他尺寸单位经过浏览器计算后都会变为px

    • 相对长度

      ①%在不同的CSS属性中有不同的含义

      ②em为相对当前元素的字体大小

      ③rem为相对根元素的大小

      （em、rem都会适应屏幕）

三、常用选择器类型：

  • 元素选择器：元素名{声明块}

    控制页面上所有该元素

    p{
color:red;
}

    控制页面上所有p元素。

  • 类选择器：.类名{声明块}

    <h1 class="test">类选择器</h1>

    .test{
  color: chartreuse;
  background-color: coral;
}

    一个元素可以有多个类名，类名与类名之间用空格隔开。

  • id选择器：#id名{声明块}

     <h1 id="box">id选择器</h1>

    #box{
  color: pink;
}

    一个元素只能有一个id，而且在页面上不能有重复的id名。

  • 子级选择器：父元素>子元素{声明块}

    <div>
     <p>子级选择器</p>
</div>

    div>p{
color: powderblue;
}

选择某一元素下对应的子元素，可以进行连续选择，但只能一级一级选。

  • 通配符：匹配页面所有元素，*{声明块}
*{
  padding: 0;
  margin: 0;
}
  • 后代选择器：祖先元素(空格)后代元素{声明块}
 <section>
        <div>
            <a href="">超链接</a>
        </div>
    </section>

section a{
  text-decoration: none;
  color: tomato;
}
  • 并集选择器：同时选择多个选择器的内容，元素,元素,元素{声明块},用逗号隔开，也可以通过类名、id、子级、后代等等进行组合。
 <section>
        <div>
            <a href="">超链接</a>
        </div>
        <b></b>
        <strong></strong>
    </section>

section a,b,strong,em{
     font-size: 50px;
     color: yellow;
   }
i,abbr,blockquote,q,span,cite,cite{
     color: palegreen;
   }
  • 伪类选择器：相同子元素应用不同的样式，元素:{选择器}，first-child和last-child是常用的，表示第一个和最后一个子元素。
section>p:first-child{
  color: purple;
}
section>p:last-child{
  color: skyblue;
}

nth-child() 匹配父元素的第N个子元素：适用于父元素中的子元素都相同，比如下列的div中，section中因为包含了a，不会生效，这种情况需用nth-of-type()。

<section>
        <a href="">链接1</a>
        <a href="">链接2</a>
        <p>第一个</p>
        <a href="">链接3</a>
        <a href="">链接4</a>
        <p>第二个</p>
        <p>第三个</p>
        <a href="">链接5</a>
        <p>第四个</p>
        <p>第五个</p>
        <p>第六个</p>
    </section>
    <h4>分隔线</h4>
    <div>
        <p>第一个</p>
        <p>第二个</p>
        <p>第三个</p>
        <p>第四个</p>
        <p>第五个</p>
    </div>

①括号里直接跟数字

p:nth-child(2){
    color: green;
}

会生效的只有div中第二个，section中因为第二个不是p标签，所以不生效。

②括号里写odd或者even：odd(奇数)，even(偶数)

p:nth-child(odd){
    color: hotpink;
}
p:nth-child(even){
    color: olive;
}

③括号里写公式an+b：a或b可以为0，n=0,1,2,3.......

下列选择器2n会生效的是div中

第二个

、

第四个

3n+1会生效的是div中

第一个

、

第四个

 p:nth-child(2n){
    color: olive;
}
p:nth-child(3n+1){
    color: skyblue;
}

nth-of-type() :匹配父元素中指定类型元素的第N个子元素：(括号里的三种情况与nth-child()相同)

p:nth-of-type(2){
    color: green;
}

会生效的为section中

第二个

，div中

第二个

a:nth-of-type(2){
    color: green;
}

会生效的为section中链接2

  • a标签配套的伪类选择器

:link 访问前

:visited 访问后

:hover 鼠标移入

:active 访问点击时

优先顺序从上到下，且在href没有属性时，:link不会生效。

  • 属性选择器

    [属性名+属性值]{声明块}或者[属性名]{声明块}

    前者更精确

    <a href="" target="_blank">超链接1</a>
<a href="" target="_self">超链接2</a>

    [target]{
    color: lightpink;
}
[target="_self"]{
    color: lime;
}

  • 伪元素选择器(元素名后面跟双冒号或者单冒号都可，为了和伪类区分，最好用双冒号)

    格式：元素名::after{content：“在之后”}

    元素名::before{content：“在之前”}

    (上面两个声明块里必须有content，用来添加内容（也可不加，但一定要有），还可设置添加内容的样式，添加的内容是作为选中元素的子元素)

    ::first-letter 首字母

    ::first-line 第一行

    ::selection 用户选中的内容（一般用来设置选中后文本的颜色或者背景颜色）

四、关联CSS

（1）外部样式表：在head标记里通过link标签引入CSS文件。

<link rel="stylesheet" href="lesson01.css">

（2）内部样式表：在head标记里通过style标签书写CSS代码。

<style>
        p{
            color: blue;
            font-size:100px ;
        }
</style>

（3）行内/内嵌样式表：在开始标记里通过style属性书写CSS代码。

<p style="color: blue;font-size: 100px;">段落1</p>

（4）导入样式表：通过@import导入。

样式表优先级：就近原则，行内=>内部=>外部

avatar
文章
阅读
粉丝