对css的简单介绍

忘是亡心i 2022-07-03 13:28 231阅读 0赞

css又被叫做层叠样式表。

学习css的话可以先学习样式表，然后在学习样式。

css样式表：

1，行内样式表

2，内部样式表

3，链接样式表

4，导入样式表

一.行内样式表：

我们将行内样式表理解为紧跟标签的样式表，类似：<p style="样式值">....</p>

二.内部样式表

内部样式表一般也是写在html文件中的，一般是写在html文件的head标签中。类似：

三.链接样式表

链接样式表一般写在外部css文件中，这样写最大的好处是实现了表现和样式的分离。一般在html文件中使用的话t也是在head标签种，类似：

需要注意：link标签中type和rel是固定的，不可以更改和删除。其次就是对于路径的理解。

路径：

1.相对路径 ：这个文件所在的路径所引起的和其他文件(或文件夹)的关系。

1.对于同在一个文件夹中的文件，使用的时候直接使用它的名字就可以。

2.对于一个文件(image1.jpg)在文件夹(例如：image文件夹)中里面,一个在文件夹外面的情况，使用的时候：../image/image1.jpg

3.对于一个文件在文件夹(image)里面，另一个文件在另一个文件夹(html)的里面，使用的时候：image/image1.jpg

2.绝对路径：一般是指文件所在的绝对位置，通常是从盘符开始的路径

1.对于本地的绝对路径的引用，使用的话：file:///+地址(在路径开头加上file:///是为了多浏览器的兼容)

2.对于网络文件的引用，直接就是该文件的网络地址就可以了

四.导入式样式表

导入式样式表其实和链接样式表类似的，都是在外部建立css文件，然后引用给html文件，同样实现了样式和表现的分离。

类似：

<head>
           <style>
                @import url(路径)
           </style>
    </head>

在使用的样式表的时候，我们要注意他们的优先级。那么这些样式表的优先级是怎样的？

很简单，在理论上来说行内样式表的优先级是最高的，因为行内样式表距离要加css的标签最近，所以总结起来他们的优先级可以用四个字来描述：就近原则。

第二大部分

css样式的定义：

选择器\{样式\}

选择器\{样式:样式值;....\}

注意：在css样式中的某些样式是具有继承性的，也就是说：css中的某些样式不仅可以作用于该标签，还可以作用于该标签的后代中。

css样式选择器：

1.基本选择器

1.全局选择器 ：\*\{...\}

2.标签(标记)选择器 ：标签\{...\}

3.类别选择器：.className\{....\}

4.id选择器：\#idName\{....\}

注意：类别选择器和id选择器都是先定义后使用。

类别选择器的特点：

1.同一个页面可以使用多个类别选择器，但是id选择器只能在一个页面出现一次

2.一个类别选择器可以被多个页面使用

id选择器的特点：

1.在一个页面中相同的id名只能出现一次，所以同一个id名的选择器只能在一个页面选择一次。

注意：在样式不一样的情况下，如果是多个类别选择器，则所有的样式都可以实现，使用方法

但是对于多个id选择器来说，即使他们的样式不同，也不可以写成上面的形式。

注意：在样式一样的情况下，也就是常说的发生冲突的情况下，这时候需要考虑选择器的优先级：

1.两个都是类别选择器的时候：那个在后面那个就会显示，因为代码是从上向下读的，所以前面的会被后面给代替掉。

2.但是当选择器不一样时，这时候就要考虑选择器的优先级拉

选择器的优先级：

行内>id选择器>类别选择器>标记选择器>全局选择器>权重

可以用权重来表示：

行内 1000

id选择器  100

类别选择器   10

标记选择器   1

全局选择器   0

权重根据文献是 0.1

举个例子：

p\{color:red;\} /\*权值为1\*/  
p span\{color:green;\} /\*权值为1+1=2\*/  
.warning\{color:white;\} /\*权值为10\*/  
p span.warning\{color:purple;\} /\*权值为1+1+10=12\*/  
\#footer .note p\{color:yellow;\} /\*权值为100+10+1=111\*/

注意：有些情况下，我们可以为某些样式设置最高权重，可以通过!important来实现。!important一般都是写在分号之前。

2.层级选择器

1，群组选择器

群组选择器一般用在这样的情况：

当多个标签都要设置成某种一样的样式时。即(标记1，标记2，....)\{.....\}

类似：h1,span\{color:red;\}这样的写法相当于：h1\{color:red;\}

span\{color:red;\}

2，后代选择器

后代选择器的写法：中间用空格隔开(可以是标签或者其唯一的标记(类或id))

3，子元素选择器

子元素选择器的写法：中间用大于号>隔开(可以是标签或者是其唯一的标记(类或者id))

注意后代选择器和子元素选择器的区别：

后代选择器的话是相对于其所有的后代来说的，包括"儿子"，"孙子"，"重孙子"....等等

子元素选择器的话是相对于其第一代儿子来说的，不包括其儿子后面的代数。

4，动态伪类选择器

动态伪类选择器的话，最常见的地方一般就是a标签。

动态伪类选择器可以分为：

1.标签:link\{\}     链接时的状态

2.标签:visited\{\}    访问过后的状态

3.标签:hover\{\}    鼠标滑过的状态(重要)

4.标签:active\{\}    鼠标点击的状态

这些情况对于a标签都可以使用，但是对于其他的标签来说最常用的是:hover和:active

5，:nth选择器

：nth选择器的话其实就是将标签设置上了个数；可以将其分为三个部分：

1.标签:first-child\{...\}        第一个子元素

2.标签:last-child\{...\}        最后一个子元素

3.标签:nth-child(n)\{....\}   第n个子元素

第三大部分

css的样式：也可以成为css格式化排版。

文字样式(排版)：

1.font-family:...         字体

2.font-size:12px;      字体的大小

3.color:red;\#0000;...字体的颜色

4.font-weight:bold;normal字体的加粗

5.font-style:italic;...字体的样式

段落样式(排版):

1.text-align:..文本对齐方式

2.text-indent:...文本缩进

3.text-decoration:...文本是否加划线

4.line-height:...行间距

5.line-height:height保持文本上下居中显示

背景样式(排版)：

1,background-color:..背景颜色

2,background-image:url(路径)背景图片

3,background-repeat:背景是否平铺

4,background-position:left/center./...背景位置

注意：背景样式(排版)是复合属性；那么什么是复合属性呢？

复合属性：就是可以将其他的属性复合起来，即只写一个background就可以了。

列表样式(排版)：

1.list-style-type:...列表符号类型

2.list-style-image:url(路径)列表的前面的图片

3.list-style-position列表的前面的位置

注意：列表属性也是复合属性。

对css的简单介绍

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关【JavaWeb学习专栏 | CSS篇】css简单介绍 & css常用选择器集锦

相关几个常用的css风格的页面简单用法介绍

相关 CSS介绍

相关对css的简单介绍

相关 css_介绍

相关 MongoDB的简单介绍

相关 CSS介绍

相关 CSS 的介绍

相关简单介绍

相关 CSS--简单介绍