CSS之基本概念篇

OXO1 写在前面

1.HTML和CSS的对比

(1)HTML只关注语义和结构,主要是对网页元素的整理和分类。
(2)CSS的主要使用场景就是美化页面,布局页面。
(3)CSS和HTML搭配使用,实现网页结构,表现分离。

2.CSS概述

(1)概念

CSS是叠层样式表(Cascading Style Sheets)也称为CSS样式表或级联样式表。
也是一种标记语言。

(2)作用

CSS主要用于设置HTML页面中的文本内容(字体,大小,对齐方式等),图片的外形(宽高,边框样式,边距等)以及版面布局和外观显示样式。

(3)CSS语法

CSS主要是由选择器和一条或者多条申明组成。

选择器  {
      属性1:  值1; 
      属性2:  值2;
      属性n:  值n;
       }

demo:

p  {
    color:  red;
    font-size: 12px;
   }

注:
选择器:指定修改样式的目标
声明: 要改成的样式

(4)CSS注释:

/* 我是被注释掉的内容 */

OXO2 选择器的分类

一. 基础选择器

1.标签选择器

标签选择器(元素选择器)是指用HTML标签名称作为选择器,按照标签分类,为页面中某一类型的标签,指定统一的CSS样式。
语法 :

标签名  {
    属性1:  值1;
    属性2:  值2;
    ....
    }

demo :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css标签选择器</title>
    <style>
        h1 {
            color: blueviolet;
        }
        h2 {
            color: red;
        }
        h3 {
            color: yellow;
        }
    </style>
</head>
<body>
    <h1>我是标题1,我用了css样式</h1>
    <h2>我是标题2,我用了css样式</h2>
    <h3>我是标题3,我用了css样式</h3>    
</body>
</html>

效果
CSS之基本概念篇

2.类选择器

使用类选择器可以实现为不同的标签差异化样式。
语法:

/*定义*/
.类名 {
        属性1: 值1
        属性2: 值2
        ....
        }

/*调用*/     
<div class=‘类名‘>  xxxx </div>

类选择器口诀:

样式点定义

class来调用

一个或多个

开发最常用

注意:

长名称或者词组可以使用中横线连接来为类选择器命名。

demo:

<style>
        .blueviolet {
            background-color: blueviolet;
        }
        .color {
            color: cyan;
        }
        .box {
            font-size: 35px;
        }
    </style>
</head>
<body>
    <div class="blueviolet color box">吵过,闹过,疯狂过,却从来没有后悔过,我们越来越笃定地相信,天长地久也不久。</div>
可以一次调用多个选择器,中间用空格分开。

3.ID选择器

语法

/*定义*/
#id名 {
        属性:  属性值;
}

/*调用*/
<div id="id名"></div>

口诀

#号来定义
 id来定义

注意点:

ID选择器一次只能调用一个
 一个ID选择器只能调用一次

demo:

<style>
        #box {
            font-size: 35px;
        }
    </style>
<body>
    <div id="box">第一次调用</div>
</body>

4.通配符选择器

语法

* {
    属性:属性值;
 }

注意点
通配符不需要调用,自动的就给所有的元素使用。

二.复合选择器

1.后代选择器(包含选择器)

语法 :

元素1 元素2 { 样式声明
}
/*eg :*/
ul li { 样式申明 }

注释:

元素2必须是元素1的后代元素。

后代选择武器是对**后代元素**起作用

demo :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css标签选择器</title>
   /*父级元素*/
   <style>
        .title {
            background-color: azure;
        }
        .title h1 {
            color: pink;
        }
        .title h1 em {
            color:aqua;
        }
    </style>
</head>
<body>
    <div class="title">
        <h1>我是div-title的后代,我为pink色<em>我是em,我是我h1的后代,我为aqua色</em></h1>  
    </div>
</body>
</html>

效果
CSS之基本概念篇

2.子选择器

子选择器只能作为某元素的最近一级后代元素(子元素)。

元素1>元素2 { 样式声明 }

3.并集选择器

并集选择器可以选择多组标签,同时定义样式。

.选择器1,
.选择器2
...   , 
       { 样式声明}

4.伪类选择器

伪类选择器用于向某些选择器添加特殊的效果,或者选择第一或者第n个元素。例如:链接伪类,结构伪类等。

(1)链接伪类选择器

a:link  /*选择所有未被访问的链接*/

a:visited /* 选择所有已被访问的链接 */

a:hover    /*选择鼠标指针位于其上的链接*/

a:active   /*选择活动链接(鼠标按下未谈起*/

注意点:

1.链接伪类标签的顺序(lvha) :a:link  a:visited a:hover  a:active

2.a标签在浏览器中有默认的样式,需要根据需求更改样式。

(2):focus伪类选择器

:focus伪类选择器用于选取获得焦点(光标)的表单元素。

语法 :

input:focus{
   属性: 属性值;
}

(3)结构伪类选择器(css3)

x :first-child         /*选取父元素的首个子元素的指定选择器*/
x :last-child          /*选取父元素的最后一个子元素的制定选择器*/
x :nth-child(n)       /*匹配属于父元素的第N个子元素,不论元素的类型*/
x :nth-last-child(n)  /*匹配从父元素最后一个子元素开始倒数的子元素*/

demo :

<style>
    li:first-child{ /*选择第一个子元素*/
        color: red;
    }
    li:last-child{ /*选择最后一个子元素*/
        color: blue;
    }
    li:nth-child(3){/*选择第三个子元素 n 代表第几个的意思*/
        color: orange;
    }
    </style>
</head>
<body>
<ul>
    <li>第一个子元素</li>
    <li>第二个子元素</li>
    <li>第三个子元素</li>
    <li>第四个子元素</li>
    <li>第五个子元素</li>
    <li>第六个子元素</li>
    <li>第七个子元素</li>
</ul>
</body>

效果
CSS之基本概念篇

OXO3 CSS引入方式

1.内部样式表(嵌入式)

嵌入式样式表指的是把css写在HTML页面中,但是css是单独抽取出来放在<style>标签中。
语法 :

<style>
    div {
        属性: 属性值;
    }
</style>

2.行内样式表

行内样式表(内联样式表)是在元素标签内部的style属性中设定css样式。
语法:

<div style="属性: 属性值;"> 键盘敲烂,去拾破烂</div>

3.外部样式(链接式)

方式一

<link> rel="stylesheet" href="css文件路径”>

方式二

<style type="text/css">
    @import url("css/style.css");
</style>


<link>属于HTML而@import属于CSS
<link>的加载速度比@import

OXO4CSS的三大特性

1.层叠性

两个或者多个相同选择器设置了相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。
层叠性原则:

样式冲突 : 遵循的原则是就近原则,哪个样式离结构近,就执行那个。

样式不冲突 :不会层叠
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        div{ 
            color: red;   /*样式产生冲突,会被层叠掉*/
            font-size: 40px;
        }
        div {
            color:skyblue; /*样式产生冲突,层叠掉前面的red*/
        }
    </style>
</head> 
<body>
    <div>
       长江后浪退前浪,前浪死在沙滩上。 
    </div>
</body>
</html>

CSS之基本概念篇

2.继承性

子标签会继承父标签的某些样式。
**demo : **

<style>
    div {
        color: red;
        font-size: 18px;
    }
    <div>
        <p>我是div的子标签,我可以继承父标签的属性</p>
    </div>
</style>

注释:

合理的使用继承可以简约代码

可以继承的属性有:text-, font , line- 这些元素开头以及color属性。
注:
关于继承的详情,请参照这位大佬的博客

3.优先级

当一个元素指向多个选择器,但是选择器定义的样式是同一个的时候,就会有优先级的产生。

注 :

选择器相同,则执行层叠性。
选择器不同,则根据选择器权重执行。

优先级权重

选择器选择器权重
继承 或 *0.0.0.0
元素选择器0.0.0.1
类选择器 伪类选择器0.0.1.0
ID选择器0.1.0.0
行内样式 style=""1.0.0.0
important无穷大

注意点:

1.继承的权重为0,,不管父级元素权重有多高,子元素的权重都是0。

2.从左到右开始比较,相同位,比较下一位。

3.复合选择器会产生权重叠加 ,但是不会产生进位。
demo

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css标签选择器</title>
       <style>
        /*标签选择器的权重为0.0.0.1*/
            li {
                color: red;}    
            /*两个标签选择器的权重之和为0.0.0.2*/
            ul li {
                  color: blue;
           }
        </style>
    </head>
    <body>
        <ul>
            <li>111</li>
            <li>11</li>
            <li>222</li>
            <li>eef</li>
        </ul>
    </body>
</html>

CSS之基本概念篇

相关推荐