上课基础及高级技巧.pptx

CSS基础及高级技巧

CSS简介CSS(CascadingStyleSheets)CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

体验CSS1、CSS基本语法1.1书写位置：head标签内部1.2环境：styletype=“text/css”/style1.3书写css属性：控制的对象{css键值对}CSS键值对语法k:v;2、CSS常用文字控制属性字体：font-family字号：font-size颜色：color内容水平对齐方式：text-align：left|center|right首行缩进：text-indent

实体化三属性宽度：width高度：height背景色：background

选择器选中控制的对象类选择器前台工作人员最常用的选择器。定义类选择器：要求以“点”开头，后面紧跟类选择器的名称，名称自定义，但要满足规则：不能出现特殊符号；不能以数字开头，可以以数字结尾使用类选择器：要求在开始标签身上添加html属性：class=“类选择器名称”多学一招：添加多个类：class=“名称1名称2”

ID选择器后台开发人员常用的选择器，一个页面同一个id名称只能使用一次。定义ID选择器：要求以“#”开头，后面紧跟ID选择器的名称，名称自定义，但要满足规则：不能出现特殊符号；不能以数字开头，可以以数字结尾使用ID选择器：要求在开始标签身上添加html属性：id=“id选择器名称”

CSS引入方式1、行内式书写在开始标签身上的style属性例如：divstyle=color:#333;background:pink;height:50px;我是行内式CSS/div注意：行内式没有实现结构与样式分离2、内嵌式注意：内嵌式是结构与样式半分离（电商首页用，优化加载速度）

CSS引入方式3、外链式新建单独的CSS文件，将文件使用link标签引入到html页面例如：linkrel=stylesheettype=text/csshref=style.css/链接三属性：格式--type--纯文本的CSS格式关系--rel--样式表/样式单地址--href--相对路径查找CSS文件注意：外链式是结构与样式完全分离

CSS基础选择器权重Id选择器类选择器标签名称选择器