css笔记--1

最新推荐文章于 2024-07-24 16:14:10 发布

Xayda~

最新推荐文章于 2024-07-24 16:14:10 发布

阅读量47

点赞数 1

文章标签： css 笔记前端

本文链接：https://blog.csdn.net/2303_78650625/article/details/131625880

版权

1.css简介

网页实际上是多层次的结构，通过css可以设置网页的每一个样式。css是用来设置和修改网页中元素的样式。

1）第一种方式：

使用内联样式，这种样式只能对一个标签有作用。如果有多个样式必须对每一个样式都要复制一遍，当前样式发生变化是要一个个修改，很麻烦，在开发当中不会使用到这种样式。

2）第二种样式：

内部样式，样式编写到head中的style标签中，再通过css的选择器为元素设置各种样式，而且修改一处就可以应用全部。

但内部样式只对一个网页起作用。不能跨网页。

3）外部样式：

外部样式表，将一个css样式编写到一个外部的css文件中，使用link标签来引入外部文件。

2.css的基本语法

注释：<style><style/>标签中" /* */ ",快捷键ctro+/

1）选择器

通过选择器可以选中页面中指定的元素。比如h1的作用就是选中所有的h1元素。

2）声明块

声明块是一个个声明组成的，声明是名值对结构，名和值之间以：连接，以；结束。

<style>
      p{
         color:green;
         front-size:60px;
       }
<style/>

3.常用选择器

3.1 id选择器

作用：根据元素的id属性选一个元素

语法：#id属性值{ }

id不能取同一个，但是class可以重复的使用，

#green{
color：green；
}

3.2类选择器

作用：根据元素的class属性选中其中一个元素。

语法：.class

一个元素可以同时指定多个.class属性。

.red{
color:red;
}

3.3通配选择器

作用：选中页面中所有的元素；

语法：*

*{
color:red;
}

3.4交集选择器

作用：同时选中对个条件的元素

语法：选择器1 选择器2 选择器n{ }

注意：

交集选择器中如有元素选择器，一定要用元素选择器开头

3.5并集选择器

作用：同时选择多个选择器对应的元素

语法：选择器1 选择器2 选择器3 选择器n{ }

3.6关系选择器

父选择器：直接包含子元素元素

子元素：直接被父元素包含

祖先元素：直接或间接包含后代元素的元素

后代元素：直接或间接被祖先元素包含的元素

兄弟元素：拥有相同父元素的元素

1）子选择器

作用：选中指定的父元素的子元素

语法父元素>子元素

div.box>span{
color:red;
}

2)后代元素选择器

作用：选中指定元素内的指定的后代元素

语法：祖先后代

div.span{
color:blue;
}

3）兄弟元素选择器

1>作用：选择下一个兄弟元素

语法：前一个 + 后一个

p+span{
color:green;
}

2>作用：选择下边所有的兄弟

语法:兄~弟

p~span{
color：green;
}

3.7属性选择器

1）[属性名]选择含有指定属性的元素

2）[属性名=属性值] 选择含有指定元素和属性值的元素

3）[属性名^=属性值] 选择属性值和指定开头的元素

4）[属性名$=属性值] 选择属性值和指定结尾的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p[title$=abl]{
        color:green;
        }
        </style>
        </head>
        <body>
        <p title="xaydaabl">快乐</p>
        
        <p title="xxxabl">努力</p>
        </body>

3.8伪类选择器

1）伪类选择器是描述一个元素的特殊形态，一般都使用开头

2）：first-child第一个子元素

3）last-child最后一个子元素

4）：nth-child()选中第n个子元素

特殊的值：

n 表示第n个 n的范围是0到无穷

2n或even 表示选中偶数位的元素

2n+1或odd表示选中奇数位的元素

4.超链接的伪类

1）：link用来表示没访问过的链接

2）：visited 用来表示访问过的链接

3）：hover用来表示鼠标移入的位置

4）：active用来表示鼠标点击时的状态

5.伪元素的选择器

伪元素是一些特殊的并不真实存在的元素、

伪元素的使用 :: 开头

:: first-letter表示第一个字母

::first表示第一行

::selection 表示选中的内容

::before元素的开始

::after元素的最后

div::before{
content::'xayda'
color:green;
}

before和after必须结合content属性来用。

Xayda~

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css笔记--1

网页实际上是多层次的结构，通过css可以设置网页的每一个样式。css是用来设置和修改网页中元素的样式。1）第一种方式：使用内联样式，这种样式只能对一个标签有作用。如果有多个样式必须对每一个样式都要复制一遍，当前样式发生变化是要一个个修改，很麻烦，在开发当中不会使用到这种样式。2）第二种样式：内部样式，样式编写到head中的style标签中，再通过css的选择器为元素设置各种样式，而且修改一处就可以应用全部。但内部样式只对一个网页起作用。不能跨网页。
复制链接

扫一扫