CSS精华

最新推荐文章于 2022-04-12 20:50:42 发布

Osean_li

最新推荐文章于 2022-04-12 20:50:42 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/Osean_li/article/details/54579960

版权

1.通过CSS可以同时控制多重网页的样式和布局

2.CSS 指的是层叠样式表，样式定义了如何显示HTML元素。定义了如何显示html元素。解决了内容和表现的分离

4.工作方式
（1）浏览器额缺省设置（就是默认设置）
（2）外部样式 link标签较常用
（3）内部样式 style标签常用
（4）内联样式
例子演示
<!DOCTYPE html>
<html>
//外部样式，一定要写到头部,样式是Css类型，关系是样式表
<head>
<meta charset="utf-8" />
<title></title>

<link type="text/css" rel="stylesheet" href="css/new_file.css">
//内部链式表
<style type="text/css">
div{
font-size: 30px; //字体变大
}

</style>
</head>
//缺省样式的实例
<body>//内联样式，内容写在标签中
<div style="color: red;"> 天朗气清，风轻云淡
</div>

<ul>
<li style="color: blue;">工程课堂1</li>
<li>工程课堂2</li>
<li>工程课堂3</li>
</ul>
</body>
</html>

********其中head中的标签，我们是看不到的，关于页面信息，引入文件。boday是可以看到的*****

5.css工作方式的优先级
（1）内联样式>内部样式>外部样式表>缺省样式（默认）。

6.CSS的基础语法
（1）两部分构成：选择器 + n条声明（n>=0）
（2）格式：选择器{
声明;声明：......}//就是选择谁，把谁改变成什么样子。大小写不明感，建议小写
选择器：就是告诉浏览器你要改变哪个dom元素的样式
声明：告诉浏览器dom元素变成声明样式。

（3）一条声明由两部分组成：一个属性 + 一个值
格式：属性：值
属性;高速浏览器要改变dom元素的哪个样式。比如高度，宽度
值;告诉浏览器改变某个样式的具体量。
div{
width：100px；heoght：100px；
}
div就是选择器，需改所有的div。花括号里面是声明。

7.css选择器
（1）元素选择器
（2）类选择器
（3）id选择器
（4）属性选择器
（5）派生选择器

8.元素选择器（标签选择器）
选择一种标签，某一种标签会被设置成某种样式。

语法：标签名{ }
例子 h1{ }
P{ }
div{ }
//都是标签选择器

9.类选择器
选择类名带有XXX的标签（可以是n种不同的标签），然后被设置一些样式
语法; .类名{ }（只要是有类名就会选中）
例如：在HTML中标签设置属性 class=“XXXX”
<div class="test"></div>
.test{ }
以对象名为准，不在依靠标签
10.id选择器
选择id是xxx的标签，然后设置一些样式
语法; #id名{ }
如;<div id="test"></div>.用法与类选择器相似，一般用于唯一的
区别：
（1）在html总中一个标签只能有一个id,但是可以有多个class
例如：<div id="test" id="test1"></div> //这样写是错误的。
<div id="test" calss="test1 test2 test3"></div> //多个calss
（2）一个id在一个html中必须是唯一的
<div id="test" ></div> //其他的标签中的id就不能叫test
（3）id选择器只能应用于具体的一个标签（不是一种），类选择器可以应用到多个标签(复用
（4）优先级不同，
一般情况下，页面唯一不会复用的，例如页面的页头，页脚。用到id。
如果用到复用的样式，用到类选择器。（类选择器使用的更多）

11.简单选择器优先级
id选择器>类选择>标签选择器

同级别浏览器，谁在后面谁生效。

###.CSS的语法、
下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。
在这个例子中，
h1 是选择器，
color 和 font-size 是属性，
red 和 14px 是值。
h1 {color:red; font-size:14px;}

如果要定义不止一个声明，则需要用分号将每个声明分开。
应该在每行只描述一个属性，这样可以增强样式定义的可读性，就像这样：
h1 {
color:red;
font-size:14px;
}