css语法

最新推荐文章于 2024-09-04 18:25:18 发布

chen_晨风

最新推荐文章于 2024-09-04 18:25:18 发布

阅读量1.3k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_37674616/article/details/81366242

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS的基础语法，包括如何应用到HTML中、选择器的使用（如基本选择器、层次选择器、属性选择器、伪类和伪元素选择器）、值与单位、级联与继承的概念。通过实例解析了各种选择器的工作原理，帮助读者系统理解CSS的使用。

摘要由CSDN通过智能技术生成

版权声明：本文为博主原创文章，若文章中有错误请联系博主改正，请不要恶意留言(不喜欢请绕道)。欢迎大家转载，转载时请注明原文地址:https://blog.csdn.net/qq_37674616/article/details/81366242

写了不少网站页面，也没有系统的学习过css 大脑也没有一个主线，不会了就去查文档。最近闲下来将MDN关于css的文档顺着写了一遍。

感兴趣的可以直接去这里看:

https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics

一、css语法

(Cascading Style Sheets)层叠样式表,是一个用于修饰文档语言HTML

属性的大小写敏感，属性与值通过：隔开

样式与样式通过分号分割

使用{}将 css声明括起来

1）css如何应用到html中

1.属性内嵌式

将样式规则写入style属性值中

2.嵌入式

            <head>

                <style>

                div{

                    width:100px;

                }

                </style>

            </head>

            <body>

                <div>hello world</div>

            </body>

3.导入式

      

            <head>

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

            </head>

2）规则

选择器{

样式规则1;

样式规则2；

}

二、选择器

1.基本选择器

1）元素选择器 div

选择所有 div

2）类选择器 .one

选择class 为one的元素

3）组合选择器 .one,.two

选择class为one 和two

4）id选择器 #logo

选择id为logo的元素

5)并且选择器

nav.nav

选择标签名为nav class为nav

2. 层次选择器

1）后代选择器 ul li

使用用空格隔开两个选择器

选择ul 的后代元素，并且后代元素是li

2）子代选择器 ul >li

使用 > 分割两个选择器

选择ul 的子代元素，并且子代元素为li

3）相邻同胞选择器

下一个兄弟选择器

使用+ 分割选择器

之后所有兄弟选择器,不包括自己

使用~分割两个选择器

li ~a 表示和li同一级别的 a标签被选中

3. 属性选择器(表单元素)

input[attr] 选择具有attr属性的元素，无论属性的值为什么
input[attr=val] 选择具有attr属性的、并且attr的值为val的元素
input[attr^=val] 选择具有attr属性的、并且attr的值以val开
input[attr&=val]选择具有attr属性的、并且attr的值以val结尾的元素
input[attr*=val]选择具有attr属性的，并且attr的值包含val的元素
input[attr~=val]选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素

4.伪类选择器

以: 开头，用在选择器后,用于指明元素某种特殊的状态下才能被选中

表示子元素的

: first-child

: last-child

: nth-child（n）

n可以为元素的序号，也可以为特殊的字符比如“odd”表示奇数 even 表示偶数

规定属于其父元素的第二个元素的的每个p

p ：nth-of-type（2）表示属于其父元素的的第二个p元素的每个p

：first-of-type、 : last-of-type

元素状态相关

:hover 悬挂

超链接相关的属性

:linK 链接（未访问）

：visited 让被访问过的链接和未访问过的链接看起来一样

： hover 用户鼠标悬停的链接

:focus 聚焦时的链接（例如，键盘用户使用 tab建或类似物移动）

: active 激活时的链接

LVHA-order: :link — :visited — :hover — :active.

5.伪元素选择器

:afer

:before

:first-letter

: first-line

三、值与单位

1）颜色单位

1.关键字

2.十六进制

3.rgb()

4.rgba()

2)长度单位

1.px 绝对值

2. em

相对单位，相对当前元素的字体大小

3.rem

相对单位相对html

html{

font-size:20px;

}

1rem=20px;

4. 百分比:用于指定大小或长度相对父级容器的宽高，或默认字体的大小

四、级联与继承

important(优先级最高)

什么情况下使用

1）一种情况

1.你写了一些很差的内联样式

2.想通过全站css文件去改变内联样式

2）想改变优先级顺序的时候

3）想覆盖掉原来！important

div{

background-color:orange !important;

}

speciflcity

source

1）important

2）权重

1000 内嵌在sytle中

100 id

10 类选择器，伪类选择器，属性选择器

1 元素选择器，伪元素选择器

3) 代码顺序

2.继承 inherit

font系列、文本系列属性、列表系列属性，cursor

1)inherit 继承父元素的样式

2）initial 不继承、

3）unset 不设定

css语法

1）css如何应用到html中

2）规则

二、选择器

1.基本选择器

2. 层次选择器

3. 属性选择器(表单元素)

4.伪类选择器

5.伪元素选择器

三、值与 单位

四、级联与继承

三、值与单位