CSS2基础(part-1)

CSS2基础

基础

简介

【全称】Cascading Style Sheets,又名层叠样式表

  • 层叠:一层一层上去
  • :列表
  • 样式:如文字大小,颜色,元素宽高等。

CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。

语言类型

标记语言,为HTML结构美化样式,实现语义与效果的分离,更好地美化网页,优化网页结构

作用于HTML的方式

行内样式(不推荐

语法

<!--写在标签中的style中-->
<body>
    <h1 style="color:skyblue;">title</h1>
</body>

缺点:

  • 工作量大,效率低下
  • html和css耦合性太高,css使html结构与样式分离的作用微乎其微

内部样式

语法

<head>
    <meta charset="UTF-8">
    <title>内部样式</title>
    <style>
        h1{
            color: skyblue;
        }
        h2{
            color: greenyellow;
        }
    </style>
</head>
<body>

优点

  • 结构和样式已经初步分开,代码可以进行服用

缺点

  • 需要复制到另一个html文件才可以实现样式复用,耗费时间

[!NOTE]

一开始写CSS样式的时候,可以使用内部样式,不用再开一个.css文件来赋予结构样式,

到后来熟练了可以使用外部样式,写在.css文件中

外部样式

语法

<!--HTML文件-->
<head>
    <meta charset="UTF-8">
    <title>外部样式表</title>
    <link rel="stylesheet" href="../CSS/03.css">
    <!--head中写link来连接外部样式表-->
    <!--rel:关系  href:来源-->
</head>
/*CSS文件*/
h1{
    color: skyblue;
}
h2{
    color: gray;
}

最常使用的方式,实际开发几乎都使用外部样式表

优点

  • 第一次通过浏览器渲染后,CSS样式就会因为与.html文件的分离而进行缓存,下次渲染则可以提高访问速度

样式的优先级

顺序

行内样式 > 内部样式 = 外部样式

attention

  • 遵循“后来者居上”的原则
  • 相当于涂鸦,涂了第二层,第一层就会看不见了

语法规范

结构

选择器 找到想要更改样式的元素
声明块 一个或多个声明(声明:[属性名: 属性值;])
h2{
    color: gray;
}

代码风格

风格 作用
展开风格 开发时推荐,便于维护和调试
紧凑风格 项目上线时推荐,可以减小文件体积,以节约网络流量,同时使打开网页的速度更快

CSS选择器

基本选择器

通配选择器

作用

选中所有的HTML元素(清除样式的时候有用)

* {
	color: red;
}

元素选择器

作用

为某种元素统一设置,无法实现同类型的差异化

标签名 {
    属性名: 属性值;
}

类选择器

作用

通过元素中的class的属性值来进行可以自己分类的样式分配

元素中的class属性的属性值可以有多个,用空格隔开

class属性的属性值尽量为字母+数字,用-连接,避免纯数字的出现

/*假设有一个元素h1,它的class属性的属性值为skyblue*/
.skyblue {
    color: skyblue;
}

ID选择器

作用

选中唯一的元素通过id属性的属性值(其中的原理是不同的元素,id属性的属性值必须不同

/*假设有一个元素h1,它的id属性的属性值为special*/
#special {
    color: skyblue;
}

复合选择器

交集选择器

作用

选中同时符合多个条件的元素

选择器1选2选3 {
    color: skyblue;
}
/*比如p.blue 就是说class属性的属性值为blue的p标签(双重筛选)*/

[!NOTE]

  • 有标签名必须写在前面
  • 不可能同时出现两个元素选择器

并集选择器

作用

选中多个选择器对应的元素

h2,
h3,
p {
            font-size: large;
        }
/*
选择器1,
选择器2,
选择器3 {
 属性名: 属性值;
}

*/
  • 一般竖着写
  • 集体声明,可以缩小样式表的体积

HTML元素之间的关系

  • 父元素
  • 子元素
  • 祖先元素(爸爸也算是祖先)
  • 后代元素(儿子也算是后代)
  • 兄弟元素

为后面的后代选择器等选择器做知识储备


后代选择器(id,类也可)

作用

选中指定元素中,符合要求的后代元素

<style>
        ul li {
            color: skyblue;
            font-size: large;
        }
    </style>
<ul>
        <li>l</li>
        <li>o</li>
        <li>v</li>
        <li>e</li>
        <li>
            <a href="#">love</a>
        </li>
        <li>
            <ul>
                <li>1</li> <!--这个也可以被选中-->
            </ul>
        </li>
    </ul>

[!TIP]

  • 最后选中的是后代,不包括祖先
  • 须符合html的嵌套要求 (可以跨代寻找
  • 子代和孙子辈以及等等可以同时兼顾

子代选择器

作用

选中指定元素中符合要求的子代元素

选1>选2>选3 {
 color: skyblue;
}
/*
选择器可以不从最外面开始找寻元素
*/

兄弟选择器

作用

选中指定元素后,符合条件的相邻兄弟元素

分类

分类 语法 作用
相邻 选1+选2 向下找同代,第一个如果是选2,则赋予样式
通用 选1~选2 向下找通带,如果是选2,则赋予样式,可以不止一个
<style>
		ul+ol {
            color: skyblue;
        }
        p+h2 {
            color: yellow;
        }
        h2~h3 {
            color: aquamarine;
            font-size: large;
        }
</style>
<body>
    <div>
        <ul>
            <li>love</li>
            <li>like</li>
        </ul>
        <ol>
            <li>long</li>
            <li>lonely</li>
        </ol>
        <p>paragrah</p>
        <h3>title333</h3>
        <h2>title2</h2>
        <h3>title3</h3>
        <h3>title33</h3>
</body>

属性选择器

作用

选中属性值符合一定要求的元素

 /* 第一种写法,选中具有相同属性的元素 */
        [title] {
            color: skyblue;
        }
        /* 第二种写法,选中属性以及属性值都相同的元素 */
        [title = "1"] {
            color: aquamarine;
        }
        /* 第三种写法,选中属性相同,且属性值开头相同的元素 */
        [title^="a"] {
            color: yellow;
        }
        /* 第四种写法,选中属性相同,且属性值结尾相同的元素 */
        [title$="e"] {
            font-size: larger;
        }
        /* 第五种写法,选中属性相同,且属性值中包含部分值的元素 */
        [title*="1"] {
            color: brown;
        }

伪类选择器

概念解析

不是真的类class,而是元素的一种状态

分类

动态伪类 意思 结构伪类 意思
link(超链接独有) 尚未连接 first-child 第一个孩子
visted(超链接独有) 连接过 last-child 最后一个孩子
hover 鼠标悬停 nth-child(n) 第n个孩子
active 元素激活(按下鼠标不松开) first-of-type 第一个同类型孩子
focus 获取焦点(表单元素) last-of-type 最后一个同类型孩子
nth-of-type(n) 第n个同类型孩子

结构伪类补充

1.关于括号中的n

  • 0或不写:什么都不选
  • n:选中所有(几乎不用)
  • 1~正无穷:选中对应序号
  • 2n或even:选中序号为偶数
  • 2n+1或odd:选中序号为奇数
  • -n+3:选中前三个

原理:an + b

2.细节:

类似于立嫡立长,即取第一个儿子,孙子...(同时)

例子

div p:first-child

意思是找div中的第一个儿子,孙子...是不是p,是就赋予样式

p:first-child

意思是找body中的第一个儿子,孙子...是不是p,是就赋予样式

否定伪类

作用

排除满足括号中条件的元素

语法

:not(选择器)

p:not(:first-child) {
            color: skyblue;
        }
UI伪类

分类

what 意思
checked 被选中的复选框或单选框
enable 可用的表单元素
disabled 不可用的表单元素
 /* 选中的是被选中的复选框和单选框 */
        input:checked {
            width: 100px;
            height: 100px;
        }
        /* 选中的是被禁用的input元素 */
        input:disabled {
            background-color: gray;
        }
        /* 选中的是可用的input元素 */
        input:enabled {
            background-color: skyblue;
        }
目标伪类(了解)

作用

选中指定的锚点元素

/* 选中锚点指向的元素 */
        div:target{
            background-color: gray;
        }
语言伪类(了解)

作用

根据指定的语言选择元素

 div:lang(en) {
            color: skyblue;
        }

伪元素选择器

作用

选中元素中的一些特殊位置(在元素里

分类

what 意思
first-letter 第一个文字
first-line 第一行文字
selection 被鼠标选中
placeholder 提示文字(输入框中)
before 最开始的位置创建子元素
after 最后的位置创建子元素
/* 选中元素中的第一个文字 */
        div::first-letter {
            color:skyblue;
        }
        /* 选中元素中的第一行文字 */
        div::first-line {
            color: gray;
        }
        /* 选中的是鼠标选中的文字 */
        div::selection {
            color: red;
            background-color: gainsboro;
        }
        /* 选中的是input元素中的提示文字 */
        input::placeholder {
            color:skyblue;
        }
        /* 在p元素一开始的位置,创建一个子元素 */
        p::before {
            content: "¥";
        }
        /* 在p元素最后的位置,创建一个子元素 */
        p::after {
            content: "millions";
        }

[!WARNING]

first-letter 和first-line内容若出现使用重叠first-letter所使用的样式会覆盖first-line的样式


选择器优先级

原则:

  • 通过权重来区分到底哪个样式最优先
  • 行内样式!important出现就不计较权重谁大谁小

细节呈现

权重语法:(a,b,c){a,b,c为个数}

a ID
b 类,伪类,属性
c 元素,为元素

权重比较方式

一个一个进行比较,当a比出结果,权重就出结果若没有,就接着往下让b进行比较,以此类推

[!IMPORTANT]

!important > 行内样式 > 一切权重

!important不到情急不可进行使用,因为这种做法会使工作的交接细节出现问题

即使使用了,过后也需要删除找到无法用权重方式使样式变更的原因,并解决

快捷方式:

只要将鼠标放在选择器上,则可以出现权重,无需计算

之前的讲解是为了了解其中的权重计算原理,而非只是表面的计算