CSS

最新推荐文章于 2024-01-15 00:00:00 发布

Alan0725

最新推荐文章于 2024-01-15 00:00:00 发布

阅读量520

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/alan0725/article/details/9829763

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<CSS Study Notes>
(1)HTML与CSS结合的四种方式
CSS 是层叠样式表(Cascading Style Sheets)，用来定义网页的显示效果。它可以解决 HTML 代码对样式定义的重复，提高后期样式代码的可维护性并增强网页的显示效果功能。简单一句话，CSS 将网页内容和显示样式进行分离，提高了显示功能。
每一个 HTML 标签都有一个 style 属性，它将所有的样式属性代码都进行了封装。
style 就是专门用于封装 CSS 代码的一个属性。CSS 代码的体现就是键和值，键和值中间用冒号连接，键与键之间用分号隔开。
/***********************************************************************************************************/
<html>
<head>
<title>CSS</title>
<style type="text/css"> //方式二：解决同一个页面内重复使用的相同样式
div {
color:green;
background-color:yellow;
}
</style>
</head>
<body>
<div style="color:red";background-color:black"> //方式一：有自己独特的样式，与其它的样式不同
DIV Area One
</div>
<div>
DIV Area Two
</div>
<span style="color:red";background-color:black">
DIV Area One
</span>
<span>
DIV Area Two
</span>
</body>
</html>
/***********************************************************************************************************/
说明：当浏览器从上往下执行 HTML 代码时，当执行到 <head> 标签中的样式时，会启动 CSS 引擎加载 <head> 标签中的样式，又当执行到 <body> 标签中的 <div> 标签时，发现它有样式(这是 <head> 标签中定义的样式)，会把样式加载到 <div> 标签上，加载完以后，又发现这个 <div> 标签上有自己的样式，所以又把这个样式重新加载一回，这样新的样式把原来的样式覆盖掉了(原则是谁后加载谁就有效)。
在实际应用中，通常将 CSS 代码单独封装成一个文件，要用到这个样式时只要在 HTML 页面导入该文件即可，这样，扩展性和可维护性都得到了提高。
/****************************************************************************************************/
/*div.css*/
@charset "UTF-8";
div {
style="color:red";
background-color:black"
}
/*format.css*/
@charset "UTF-8";
format {
@import url(div.css);
}
/****************************************************************************************************/
<html>
<head>
<title>CSS</title>
<style type="text/css"> //方式三：解决多页面内重复使用的相同样式(通常使用该方式)
@import url(format.css);
</style>
</head>
<body>
<div>
DIV Area One
</div>
<div>
DIV Area Two
</div>
<span>
DIV Area One
</span>
<span>
DIV Area Two
</span>
</body>
</html>
/****************************************************************************************************/
<html>
<head>
<title>CSS</title>
<link rel="stylesheet" type="text/css" href="format.css"/> //方式四：原理跟方式三一样
</head>
<body>
<div>
DIV Area One
</div>
<div>
DIV Area Two
</div>
<span>
DIV Area One
</span>
<span>
DIV Area Two
</span>
</body>
</html>
/****************************************************************************************************/
(2)CSS基本选择器
选择器就是指定 CSS 要作用的标签，那个标签的名称就是选择器。意为：选择哪一个要作用样式的容器。
选择器共有三种：
1)html 标签选择器(使用的是 html 的标签名，标签选择器只能完成对同一组标签进行样式设定)
2)class 选择器(使用的是标签中的 class 属性，类选择器能完成不同标签相同类名进行统一样式设定，class 意指某一类)
3)id 选择器(使用的是标签中的 id 属性，由于 id 的唯一性，故一般只作用于单个标签)
每一个标签都定义了 class 属性和 id 属性，用于对标签进行标识，方便对标签进行操作。在定义中，多个标签的 class 属性值可以相同而 id 值要唯一，因为 JavaScript 中也要经常使用 id 选择器。如果 id 的值不唯一的话，那么在取 id 属性标签的时候很有可能就会出错。
优先级：id 选择器 > class 选择器 > html 标签选择器
(div 标签代表的是所有的 div 标签，而 class 是 div 标签中的某一部分，而 id 是唯一的，原则是作用范围越小优先级越高；如果标签选择器相同的话，原则是谁后加载谁就有效)
/*******************************************************/
<html>
<head>
<title>CSS</title>
<style type="text/css">
div {
background-color:yellow;
}
.font {
color:green;
}
#color {
color:blue;
}
</style>
</head>
<body>
<div>
DIV Area One
</div>
<div class="font">
DIV Area Two
</div>
<span class="font">
DIV Area One
</span>
<span id="color">
DIV Area Two
</span>
</body>
</html>
/*******************************************************/
(3)CSS扩展选择器
1)关联选择器(由于标签是可以嵌套的，如果要让相同标签中的不同标签显示不同样式就可以使用此选择器，关联选择器一般作用于标签中的标签)
/*******************************************************/
<html>
<head>
<title>CSS</title>
<style type="text/css">
b {
color:blue;
}
span b {
color:green;
}
</style>
</head>
<body>
<div>
<b>DIV</b> Area
</div>
<span class="font">
<b>DIV</b> Area
</span>
</body>
</html>
/*******************************************************/
2)组合选择器(对多个不同选择器进行相同样式设置的时候应用此选择器)
/*******************************************************/
<html>
<head>
<title>CSS</title>
<style type="text/css">
div,.font,#color,span b {
background-color:yellow;
}
</style>
</head>
<body>
<div>
DIV Area One
</div>
<div class="font">
DIV Area Two
</div>
<span class="font">
DIV Area One
</span>
<span id="color">
<b>DIV</b> Area Two
</span>
</body>
</html>
/*******************************************************/
3)伪元素选择器(就是在 HTML 中预先定义好的一些选择器，称为伪元素，其实指的是元素的一种状态)
a:link(超链接未点击状态)
a:visited(被访问后的状态)
a:hover(光标移到超链接上的状态)
a:active(点击超链接时的状态)
p:first-line(段落的第一行文本)
p:first-letter(段落中的第一个字母)
:focus(具有焦点的元素)
注意：要使用 L-V-H-A 顺序编写样式代码，如果不按照此顺序，那么原来的状态效果将不复存在。另外，不要以为伪元素只能加在 <a> 标签上，其它很多标签都能用。
/************************************************************/
<html>
<head>
<title>CSS</title>
<style type="text/css">
a:link {
color:red;
}
a:visited {
color:yellow;
}
a:hover {
color:blue;
}
a:active {
color:black;
}
p:first-line {
background-color:yellow;
color:red;
}
p:first-letter {
color:blue;
font-size:36px;
}
div:hover {
background-color:green;
color:red;
font-size:24px;
}
input:focus {
background-color:blue;
}
</style>
</head>
<body>
<hr/>
<a href="http:www.baidu.com">Baidu</a>
<hr/>
<p>
被放逐的少年<br/>
醒来张开眼睛的瞬间明白了原来.....<br/>
</p>
<hr/>
<div>Alan</div>
<hr/>
<input type="text"/>
<hr/>
</body>
</html>
/************************************************************/
/*************************************************************************************************************************************************************************/
/*************************************************************************************************************************************************************************/