CSS

最新推荐文章于 2024-09-11 20:31:47 发布

字符传送门

最新推荐文章于 2024-09-11 20:31:47 发布

阅读量132

点赞数

分类专栏： Javaweb 文章标签： css html

本文链接：https://blog.csdn.net/qq_42351519/article/details/113058352

版权

Javaweb 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

CSS

概念：层叠样式表
	层叠：多个样式可以作用在同一个HTML上，同时生效
好处：
	功能强大
	将内容的展示和样式的控制分离
		降低耦合度
		让分工协作更容易
		可以提高开发的效率
CSS的使用：CSS与html结合使用
内联样式
	元素展示和内容控制不分离
	作用域是当前标签属性
内部样式
	比较常用的方式
	作用域在所有的标签
外部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS与HTML的结合使用</title>
    <style>
        p{
            color: coral;
        }
    </style>
</head>
    <body>
    <!--
    内联样式
        在标签内使用style属性指定css代码
    -->
    <div style="color: brown">
        helloworld
    </div>
    <!--
    内部样式
        在head标签内定义style标签，style标签体内容就是css代码
    -->
    <p>
        您好
    </p>
    </body>
</html>
---------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head >
    <meta charset="UTF-8">
    <title>外部样式</title>
    <link rel="stylesheet" href="a.css">
    <style>
        @import "a.css";
    </style>
    <!--
  外部样式
      1.定义css资源文件
      2.在head标签内用link标签引入资源文件
  -->
</head>
<body>
    <div>
        helloworld
    </div>
</body>
</html>

CSS基本语法

选择器{
	属性名：属性值；
	.....
}
选择器就是筛选具有相似特征的元素
	注意事项：每一对属性需要使用加分号
选择器：
	基础选择器
		id选择器
		元素选择器
		类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>
    <style>
        #div1{
            color: brown;
        }
        div{
            color: aqua;
        }
        .csls{
            color: blue;
        }
    </style>
</head>
<body>
<!--id选择器——优先级高于元素选择器
 建议id值唯一
 #id值{
 属性名：属性值；
 }
-->

<!--元素选择器
标签名称{
属性名：属性值；
}
-->
<!--类选择器——类选择器的优先级高于其他选择器
选择具有相同类名的元素
多个标签可以作用在同一个class
-->
    <div id="div1">
        你好
    </div>
    <div id="div2">
        我好
    </div>
<p class="csls">
    好孩子
</p>
</body>
</html>

	拓展选择器
		所有选择器
			*{}
		并集选择器
			*选择器1，选择器2
		子选择器
			选择1 选择器2{}；筛选选择器1下的选择器2
		父选择器：筛选选择器2的父选择器
			选择器1>选择器2{}
		属性选择器
			选择元素名称 属性名=属性值的元素；
			元素名称[属性名=“属性值”]{}
		伪类选择器：选择一些元素具有的状态
			元素：状态{	}