html+css+js Web开发学习——4_html+css+js-web-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_14877637/article/details/87651485

本文介绍了Web开发中关于CSS的关键概念，包括页面级和网站级样式的创建、选择器的使用、盒子模型的详细解析、定位及z-index的应用，还探讨了浮动、溢出处理、图像格式以及表格布局等内容，是提升网页设计布局能力的重要指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

创建页面级样式

在html的head标签中添加如下示例：
<style type="text/css">
h1 { font-size:small; font-weight:bold; }
</style>

创建网站级样式

将上面的style标签中的内容保存至一个后缀为.css 的文件中比如style.css，然后在需要使用的html文件中包含如下：
<link rel="stylesheet" href="style.css" type="text/css">

选择器（超级常用）

1、任何标签都可用作CSS选择器。
	可将样式同时用于多种元素：
	p,ol,ul {color:red;},
	等效于：
	p {color:red;}
	ol {color:red;}
	ul {color:red;}
2、上下文选择器，可以设定嵌套在指定标签中的某标签的样式。
	cite {color：green;}
	p cite {color:red;}
	div cite {color:blue;}
	默认的cite颜色为绿色。若cite嵌套在p标签中则颜色为红色，若cite嵌套在div中则颜色为蓝色。
	注：p和cite之间没有逗号，如有则为同时运用样式了。
3、类和ID。及标签的class和id属性。
	.aaaaa {color:red;}：将aaaaa类的标签颜色都设置为红色。
	div.aaaaa {color:red;}：如果div标签属于aaaaa类则颜色为红色。
	#bbb {color:red;}：ID为bbb的标签颜色为红色。

属性选择器

p[class="abc"] {font-size:12px;}：匹配属性class的值为abc的p元素，相当于p.abc
p[class] {font-size:12px;}：匹配所有设置了class属性的p元素。
同理，其他属性也可以这样使用
=~：匹配以空格分隔的属性值列表，p[class=~"aa"]就会匹配<p class="aa bb cc">
^=：与指定属性以指定值打头的元素匹配
*=：与指定属性包含指定值的元素匹配
$=：匹配属性值以特定字符串结尾的元素
|=：匹配以连字符分隔得属性值列表。