整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
本章目标：
Cascading Style Sheet 级联样式表。 表现HTML或XHTML文件样式的计算机语言。 包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定
在这里插入图片描述
说明：
在这里插入图片描述
CSS1.0 读者可以从其他地方去使用自己喜欢的设计样式去继承性地使用样式；
CSS2.0 融入了DIV+CSS的概念，提出了HTML结构与CSS样式表的分离
CSS2.1 融入了更多高级的用法，如浮动，定位等。
CSS3.0 它包括了CSS2.1下的所有功能，是目前最新的版本，它向着模块化的趋势发展，又加了很多使用的新技术，如字体、多背景、圆角、阴影、动画等高级属性，但是它需要高级浏览器的支持。
由于现在IE 6、IE 7使用比例已经很少，对市场企业进行调研发现使用CSS3的频率大幅增加，学习CSS3已经成为一种趋势，因此本书会讲解最新的CSS3版本
本课程中主要讲解css2.1和css3
CSS的优势
在这里插入图片描述
Style标签
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
链接式与导入式的区别
CSS样式优先级
行内样式>内部样式表>外部样式表
就近原则：越接近标签的样式优先级越高
【学员练习】 使用标题标签和段落标签制作李白的诗《望庐山瀑布》，诗正文字体颜色为绿色，字体大小为14p
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
小结
基本选择器的优先级
ID选择器>类选择器>标签选择
标签选择器是否也遵循“就近原则”？ 不遵循，无论是哪种方式引入CSS样式，一般都遵循ID选择器 > class类选择器 > 标签选择器的优先级
在这里插入图片描述
在这里插入图片描述
后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入
在这里插入图片描述
在这里插入图片描述
添加图片注释，不超过 140 字（可选）
CSS样式表是一个序列通用字符集，传输和存储过程中，这些字符必须由支持 US-ASCII（例如 UTF-8, ISO 8859-x, SHIFT JIS 等）字符编码方式编译
When a style sheet is embedded in another document, such as in the STYLE element or "style" attribute of HTML, the style sheet shares the character encoding of the whole document.
当样式出现在其它文档，如 HTML 的 STYLE 标签或标签属性 "style"，样式的编码由文档的决定。
When a style sheet resides in a separate file, user agents must observe the following priorities when determining a style sheet's character encoding (from highest priority to lowest):
An HTTP "charset" parameter in a "Content-Type" field (or similar parameters in other protocols)BOM and/or [@charset ]()or other metadata from the linking mechanism (if any)charset of referring style sheet or document (if any)Assume UTF-8
文档外链样式表的编码可以由以下各项按照由高到低的优先级顺序决定：
Authors using an [@charset ]() rule must place the rule at the very beginning of the style sheet, preceded by no characters. (If a byte order mark is appropriate for the encoding used, it may precede the [@charset ]() rule.)
[@charset ]() must be written literally, i.e., the 10 characters '[@charset ]() "' (lowercase, no backslash escapes), followed by the encoding name, followed by '";'.
推荐：
@charset "UTF-8";
.jdc{}不推荐：
/**
* @desc File Info
* @author Author Name
* @date 2015-10-10
*/
/* @charset规则不在文件首行首个字符开始 */
@charset "UTF-8";
.jdc{}@CHARSET "UTF-8";
/* @charset规则没有用小写 */
.jdc{}/* 无@charset规则 */
.jdc{}更多关于样式编码：CSS style sheet representation
样式书写一般有两种：一种是紧凑格式 (Compact)
.jdc{ display: block;width: 50px;}一种是展开格式（Expanded）
.jdc{
display: block;
width: 50px;
}团队约定
统一使用展开格式书写样式
样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。
/* 推荐 */
.jdc{
display:block;
}
/* 不推荐 */
.JDC{
DISPLAY:BLOCK;
}/* 推荐 */
.jdc {}
.jdc li {}
.jdc li p{}
/* 不推荐 */
*{}
#jdc {}
.jdc div{}统一使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）
.jdc {
width: 100%;
height: 100%;
}每个属性声明末尾都要加分号；
.jdc {
width: 100%;
height: 100%;
}左括号与类名之间一个空格，冒号与属性值之间一个空格
推荐：
.jdc {
width: 100%;
}不推荐：
.jdc{
width:100%;
}逗号分隔的取值，逗号之后一个空格
推荐：
.jdc {
box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}不推荐：
.jdc {
box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}为单个css选择器或新申明开启新行
推荐：
.jdc,
.jdc_logo,
.jdc_hd {
color: #ff0;
}
.nav{
color: #fff;
}不推荐：
.jdc,jdc_logo,.jdc_hd {
color: #ff0;
}.nav{
color: #fff;
}颜色值 rgb() rgba() hsl() hsla() rect() 中不需有空格，且取值不要带有不必要的 0
推荐：
.jdc {
color: rgba(255,255,255,.5);
}不推荐：
.jdc {
color: rgba( 255, 255, 255, 0.5 );
}属性值十六进制数值能用简写的尽量用简写
推荐：
.jdc {
color: #fff;
}不推荐：
.jdc {
color: #ffffff;
}不要为 0 指明单位
推荐：
.jdc {
margin: 0 10px;
}不推荐：
.jdc {
margin: 0px 10px;
}css属性值需要用到引号时，统一使用单引号
/* 推荐 */
.jdc {
font-family: 'Hiragino Sans GB';
}
/* 不推荐 */
.jdc {
font-family: "Hiragino Sans GB";
}建议遵循以下顺序：
.jdc {
display: block;
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #333;
background: rgba(0,0,0,.5);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}mozilla官方属性顺序推荐
CSS3 浏览器私有前缀在前，标准前缀在后
.jdc {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}更多关于浏览器私有前辍写法：#Vendor-specific extensions
Google Code Guide
SS（层叠样式表）是一种用于描述HTML或XML（包括各种XML方言，如SVG或XHTML）文档的视觉表现的样式语言。CSS描述了元素应该如何在屏幕、纸张、语音或其他媒体上显示。本文将深入探讨CSS的核心概念和语法，为初学者和有经验的开发者提供一个参考。
选择器是CSS中的基础概念，它们用于指定我们想要样式化的HTML元素。
p {
color: black;
}
.error {
color: red;
}
#unique-element {
color: blue;
}
input[type="text"] {
background-color: #f0f0f0;
}
a:hover {
text-decoration: underline;
}
组合器描述了不同选择器之间的关系。
article p {
line-height: 1.6;
}
ul > li {
list-style-type: square;
}
h2 + p {
margin-top: 0;
}
h2 ~ p {
color: #333;
}
伪元素用于样式化元素的特定部分。
p::first-line {
font-weight: bold;
}
CSS属性定义了如何对元素进行样式化，而值则指定了属性的外观或行为。
width: 100px;
height: 50vh; /* 视口高度的50% */
background-color: #ff0000;
color: rgb(0, 255, 0);
border-color: rgba(0, 0, 255, 0.5);
font-family: 'Arial', sans-serif;
text-align: center;
text-decoration: underline;
margin: 10px 5px;
padding: 20px;
border-style: solid;
border-width: 1px;
border-color: #000;
.container {
display: flex;
justify-content: space-between;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.absolute-element {
position: absolute;
top: 10px;
right: 10px;
}
使用媒体查询可以创建响应不同屏幕尺寸的样式。
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}
CSS是一个强大的样式语言，它使得开发者能够创建精美、响应式的网页。通过理解并掌握CSS的选择器、属性、布局等核心概念和语法，前端工程师可以有效地设计和实现用户界面。随着CSS3和后续版本的不断发展，CSS的能力也在不断增强，为前端开发带来了更多的可能性。
*请认真填写需求信息，我们会在24小时内与您取得联系。
