CSS基础

最新推荐文章于 2023-08-18 20:40:23 发布

火星人～板哥

最新推荐文章于 2023-08-18 20:40:23 发布

阅读量176

点赞数 1

分类专栏： CSS 文章标签： CSS基础 CSS外部引用

本文链接：https://blog.csdn.net/weixin_42200858/article/details/102748092

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS基础

一、CSS样式加载的方式

CSS一般有三种方式改变 html 的样式：

1.行间样式- 在HTML元素中使用 “style” 属性

行间样式：
<body>
    <div style="样式">...</div>
</body>

2.内部样式表----写在HTML文档头部 <head> 区域使用 <style> 元素来包含CSS

内联样式表：
<head>
    <style>
        ...样式...
    </style>
</head>

3.外部引用 - 使用外部 CSS 文件

文件路径可以是绝对路径也可以是相对路径
绝对路径：这个就可以写D：/文件夹1/文件夹2/css/name.css
相对路径：就是你的.css文件和你的.html文件的相对位置,可移植性好，当你将文件拷贝到其他电脑也可以执行，一般都用相对路径。
–同级：当你的.css文件和.html文件在同一文件夹下直接写文件名称：href="name.css"；
–下级：当你的css文件夹（里面放的.css文件）和.html文件在同一文件夹下：href="css/name.css"；
–上级：当你的css文件夹（里面放的.css文件）和html文件夹（里面放的.html文件）在同一文件夹下：href="../css/name.css"；其中 “../ ” 是向上返回一层, “../../” 向上返回两层

外部引用：
<head>
    <link rel="stylesheet" type="text/css" href="地址/文件.css">
</head>
<body>

</body>
---------------------------------------------------
属性：type：文件类型；
	  rel：和当前文件的关系需独立创建一个css文件。
	  href：链接css文件路径;

最好的方式是通过外部引用CSS文件（.css文件中）.

二、基础选择器

id选择器

<style>
#kk{
	color:#F40;
	text-align:center;
}
</style>

<body>
	<div id="kk">...</div>
</body>
---------------------------------------------------------------------
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
注意：(一个标签只能有一个id属性,并且ID值唯一。)

class选择器

<style>
.food{
	color:#F40;
	text-align:center;
}
</style>

<body>
	<div class="food">...</div>
</body>
-----------------------------------------------------------------------
class 选择器用于描述一组元素的样式，
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示
class 选择器有别于id选择器，class可以给多个元素设置相同的class，定义这一类元素的样式。

标签选择器

<style>
div{
    width:80px;
    height:80px;
    color:#0f0;
    background-color;
}
</style>

<body>
	<div>...</div>
</body>
-------------------------------------------------
标签选择器就是直接通过标签来选择标签
注意：(由于它单独选择权重比较低，通常用它来对标签进行初始化。)

通配符选择器

<style>
*{
    margin: 0;
    padding: 0;
}
</style>
-----------------------------------------------
一般是对整个页面进行初始化，例如再body标签中，左侧有个8像素，我们一般会对它进行初始化。

属性选择器

<style>
[id]{           //通过它的属性进行选择
    样式
}

</style>

<body>
	<div id="id" class="class">...</div>
</body>

选择器的权重问题：

权重	所占比例(数值之间的差距是256 )
`！important`	Infinity(无穷)
`行间样式`	1000
`id`	100
`class\|属性\|伪类`	10
`标签\|伪元素`	1
`通配符`	0

三、高级选择器

父子选择器

<style>
	div span{
    	样式
	}
</style>

<body>
	<div>
    	<span>...</span>
	</div>
</body>
------------------------------------------------------------------------
在父子选择器时，浏览器遍历的顺序是自右向左
这里只要是div下的所有span标签都会选择出来，即所有的子孙是span标签的。

直接子元素选择器

<style>
	div > span{
	    样式
	}
</style>

<body>
	<div>
    	<span>...</span>
	</div>
</body>
---------------------------------------------
比父子选择器的要求更加的严格必须是div的儿子，他的子孙不算。

并列选择器

<style>
	div.demo{
  	  color:red;
	}
</style>

<body>
	<div>1</div>
	<div class="demo">2</div>
	<p class="demo">3</p>
</body>
----------------------------------------------------
并列选择器中间没有空格，可以理解为同时满足这两个条件的元素(并且)。

分组选择器

/*span是标签，food是类名*/
<style>
	span,.food{
		background-color:#00f;
	}
</style>

<body>
	<div><span>... </span></div>
	<div class="demo"><span class = "food">...</span></div>
	<p class="food">3</p>
</body>
------------------------------------------------
每个选择器用逗号分隔。这个类似于或者的意思。

伪类选择器

<style>
标签(div)：hover{
    border-radius：10px；        //样式效果：边角变成圆角
}
</style>

<body>
	<div><span>... </span></div>
	<div class="demo"><span class = "food">...</span></div>
	<p class="food">3</p>
</body>
--------------------------------------
伪类选择器用来做一些当鼠标放上去实现的效果,
例如上面放在div标签上时div标签会出现圆角。