CCS笔记1、CSS、选择器分类、与按位置分类

最新推荐文章于 2024-04-12 19:01:42 发布

欧文Z-phone

最新推荐文章于 2024-04-12 19:01:42 发布

阅读量701

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/Z_phone/article/details/84973079

CSS 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了CSS层叠样式表的基本概念和用途，详细讲解了类选择器、id选择器、标签选择器、关联选择器、组合选择器以及伪类选择器的用法。同时，根据位置分类，阐述了内嵌样式、行内样式和外部样式的定义及应用场景，包括链接和导入外部样式的不同之处。

CSS层叠样式表（Cascading Style Sheet）<style></style>

用来控制网页样式，并允许将网页样式和内容分离的标记性语言

样式<style></style>一般在<head>之前

基本语法：

选择器
属性
属性的取值（value）

基本格式：

选择器{属性：值；属性：值}

属性与值用冒号隔开，属性与属性用分号隔开

选择器

1、类选择器
a、以点开头
b、通过class属性来调用
c、可以被多次调用

先建立类选择器，以点开头，命名“样式一”

<style type="text/css">
.样式一{
	color:#009;
	font-size:14px;
	font-family:"黑体", "华文彩云", "华文行楷";
}
</style>

调用：

<b class="样式一">用class调用类选择器样式</b>
<p class="样式一">可以多次调用</p>

2、id选择器
a、以“#”开头
b、通过元素id属性来调用
c、只能被调用一次

建立id选择器，以#开头，id号为no1
<style type="text/css">
#no1{
	color:#009;
	font-size:14px;
	text-decoration:underline;  
}
</style>
/*decoration：修饰 underline：下划线*/

调用：
<i id="no1">id只能调用一次</i>

3、标签选择器
直接选择HTML的标记，不需要应用，自动应用样式

以p标记做例子：
<style type="text/css">
p{
	color:#009;
	font-family:"黑体", "华文彩云", "华文行楷";
}
</style>
font-family后面跟多个字体，默认使用第一个，以此类推

4、关联选择器

类别举例	说明
p b	选择p元素内部的所有b元素。
p>b	选择父元素为p元素的所有子元素b
p+b	选择紧接在p元素之后的所有b元素。ps：一个P元素后面只有一个b元素起作用
p .aa	p下面的aa
p.aa	同时具有p与aa

5、组合选择器

多个样式使用相同属性，元素之间用逗号隔开

例如：h1,.aa,#bb{ }

<style type="text/css">
p,b,.样式一{
	color:#FF0;
	font-size:24px;
	text-decoration:overline;
}
</style>

6、伪类选择器

类可以多个元素访问，大部分只有一个状态，但超链接有4个状态

伪类的4个状态：

：link	正常连接时候的状态
：visited	已经访问过的状态
：hover	鼠标移上去的状态
：active	鼠标点击时候的状态

a:link{
	color:#000;
	font-size:12px;
	text-decoration:overline;
	}

a:visited{
	
	}

写代码时可省略某个状态，但是必须按表格从上往下顺序（l,v,h,a）写下来

按位置分类

1、内嵌样式( 内部样式）

在HTML页面的内部嵌入样式

只能供本页面使用

<style type="text/css">

</style>

2、行内样式

通过元素的style属性直接写的样式

语法： <标记 style="样式">
<p style="color:#036">

</p>

3、外部样式

新建一个CSS文件，在HTML页面中链接或导入来引用外部样式

1、链接外部样式

语法：<link rel="stylesheet" type="text/css" href="地址"/>

rel：表示链接的类型，这个属性不能省略，rel="stylesheet"表示链接的类型是样式表

type="text/css"：表示文件时CSS文本

2、导入外部样式

语法：@import url(' 地址 '); URL可省略，建议不省略
<style type="text/css">
@import url("css站点/style/Untitled-1.css");
</style>
@import：导入外部样式

url：CSS的地址

3、链接样式和导入样式的区别的区别

1、链接只能在HTML中引入；

2、导入样式既可以在HTML中导入外部样式，也可以在CSS样式文件中导入外部样式。
@charset "utf-8";
@import url("地址");
<style type="text/css">
p,b,.样式一{
	color:#FF0;
	font-size:24px;
	text-decoration:overline;
}
</style>
注意：先导入，再执行样式