javaWeb学习记录之CSS-Toy模板网

这篇具有很好参考价值的文章主要介绍了javaWeb学习记录之CSS。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、 CSS概述
1、CSS是什么？

CSS 指层叠样式表
2、CSS有什么作用？
CSS就是用来修饰HTML
3、CSS代码规范
选择器名称 { 属性名：属性值；属性名：属性值；…….}
属性与属性之间用分号隔开
属性与属性值直接按用冒号连接
如果一个属性有多个值的话，那么多个值用空格隔开。例如： border:5px solid red;
注释：/ 注释内容*/

二、CSS选择器（重点）

*CSS选择器：指定了CSS样式作用于哪个HTML标签上

1、基本选择器
 HTML标签选择器（优先级最低）
*就是把HTML标签名作为选择器名称
*格式：标签名 {}

 类选择器
*样式格式： .class名{}
*标签格式：

*能设置不同标签的相同样式

 Id选择器（优先级最高）
*样式格式： #id名{}
*标签格式：

*有针对性地设置样式
2、扩展选择器
 关系选择器
*两个或者多个选择器间存在关系
*格式：选择器1 选择器2 {}
*适用于标签嵌套

 组合选择器
*格式：选择器1,选择器2{}
*适用于多个不同标签设置相同样式

 伪元素选择器
*HTML预定义的选择器
*格式：标签名:选择器{}
*选择器名称为 HTML标签的状态。例如：a:link{}表示链接标签在未访问过时的样式。
三、HTML与CSS的结合方式
*CSS必须结合HTML来用。
*4种使用方式：
A、style属性方式（内联样式）
*适合局部修改
*今天天气好晴朗

B、style标签方式：（内嵌样式）
		*<style></style> 存在于head标签之中的
		*例如：<style type="text/css">
					font {
							font-size:150px;color: red;
					}

*页面的多个标签统一设置。

C、导入方式（外部样式中使用较少）
			*格式：@import url("CSS文件路径");
			*存在于<style>标签中

D、链接方式（外部样式最常用的方式）
			*格式：<link rel="stylesheet" type="text/css" href="CSS文件路径"/>
			*存在于<head>标签中

	外部样式好处：

提升了代码的复用性，更加易于维护，从而极大提高工作效率

样式优先级：
内联样式》》内嵌样式》》外部样式（就近原则）

链接方式和导入方式区别：
1、链接方式引用的CSS会被同时加载。而导入方式引入的CSS在页面全部加载完以后才会加载，在网速较慢时会出现网页没有样式的情况。（导入方式硬伤）
2、链接方式支持JavaScript修改样式，而导入方式不支持（导入方式硬伤）
3、链接方式可以引入样式也可以做其他事情。而导入方式只能引CSS
4、链接方式导入的CSS任何浏览器都OK，而导入方式要求浏览器版本必须在IE5以上
建议使用链接方式

四、CSS布局（了解）
 盒子模型（了解会用）
在进行布局前需要把数据封装到一块一块的区域内，这个区域的专业术语叫盒子。
边框（border）分为上下左右。用于设置盒子边框
内边距（padding）分为上下左右。用于设置元素在盒子内的位置。
外边距（margin）分为上下左右。用于设置盒子的位置

 漂浮属性（简单了解）
float

 定位属性（简单了解）
position文章来源地址https://www.toymoban.com/news/detail-495002.html

到了这里，关于javaWeb学习记录之CSS的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！