CSS一、css简述1、css是什么 ？ 有什么作用 HTML--页面结构，人的面部CSS--美化页面，给人化妆2、css：层叠样式表层叠：一层一层叠加的样式表：存储样式的地方，多个样式给一个人的面部化妆：画口红，画眼影，打粉底 | | | |HTML标签 样式1 样式2 样式3css通常称为css样式或叠层样式表，主要用途设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）、一级版面的布局等外观显示样式CSS可以使用HTML页面更加好看，css+div布局更加灵活，更容易绘制出用户需要的结构3、css作用：修饰HTML页面，更丰富多彩地展示超文本信息二、CSS入门案例1、创建一个HTML文件2、在HTML上创建一个字体标签3、字体标签中新增一个style属性，并修改style属性值运行效果三、为什么使用CSS代替HTML属性设置样式因为HTML属性在单独使用时有一定的局限性，所以要配置css样式代码才可以展示更为丰富的效果四、CSS的代码规范1、放置规范（1）在<style>标签内容体中书写css样式的代码 <style>标签放置在<head>标签中2、格式规范选择器名称{属性名：属性值；属性名：属性值；。。。。。}选择器：即指定css样式作用在哪些HTML标签上3、代码规范属性名和属性值之间是键值对关系属性名和属性值之间用：连接，最后;结尾 例如：font-size: 120px;如果一个属性名有多个值，多个值使用空格隔开例如：border: 5px solid red; （border设置边框的）CSS注释： /* 注释内容*/ 等同于java的注释五、CSS选择器1、基本选择器 元素选择器 HTML标签又叫HTML元素元素选择器：即以HTML标签名作为选择器名称作用：选择css样式代码，作用于对应标签签名的标签上格式：标签名{/*CSS样式代码*/}适用范围：适用于将相同样式作用在多个同名标签上（2）id选择器每个HTML标签都有一个id属性，id的属性值必须在本页面是唯一的id选择器： 即以HTML的id的属性值作为选择器名称作用：选择css样式代码，作用于某个规定id值得HTML标签上格式：#id值 {/*CSS样式代码*/}适用范围：适用于将样式作用于具有某个id的标签上（更有针对性）注意： 必须手动保证id值在本页面唯一（如果不唯一，或具有共同样式，但js会出问题）（3）类选择器每个HTML标签都有一个class属性，class属性值即为类名类选择器：即以HTML的类名（class属性）作为选择器名称作用：选择css样式格式化代码作用于相对类名的HTML标签上格式：.类名 {/*CSS样式代码*/}适用范围：适用于将样式一次作用在相同类名的标签上（即使标签名不同也可以）2、基本选择器的组合方式层级关系（后代选择器）标签和标签之间有层级关系，例如<html>标签的子标签为<body>标签我们可以对基本选择器进行组合，表现出层级关系，从而更加针对性地把样式作用于某些标签上格式：选择器1 选择器2 .......{/*CSS样式代码*/}表示选择器1下边的选择器2....六、边框属性所有的HTML标签都有边框，默认边框不可见border设置边框的样式格式： 宽度 样式 颜色；例如 vorder： 1px solid red; 表示1像素粗的实线的洪泽边框线条样式：solid实线、none无边框、double双线边框width 用于设置标签的宽度height 用于设置标签的高度background-color 设置标签的背景颜色背景颜色设置的两种主流方式：1、英文单词： red blue yellow2、颜色代码 ： 格式 #红禄蓝 每一个颜色用凉粉16进制位数表示例如 ff1100 红色颜色最重，绿色其次，蓝色几乎没有七、布局float 通常默认的排版方式，将页面中的元素从上到下一一罗列，二实际开发中，需要左右暗示进行排版，就需要使用浮动属性 格式：选择器（float：属性值;）left：元素向左浮动right：元素向右浮动注意：因为元素设置浮动属性后，会脱离原有文档流，从而会影响其他元素的样式，所设置浮动以后，页面模式需要重新调整八、转换display 块元素：独占一行，常见 h1 p div ul行内元素（内联元素）：只占自身大小，自动换行span a input display属性可以使得元素在行内元素和块元素之间相互转换格式：选择器{display：属性值；}常用的属性值：block：块元素inline：行内元素inline-block:行内块元素，既可以设置宽高，又不会独占一行<img src=" " alt=" " />none：元素将被隐藏，不会显示，也不占用页面的空间visbility hidden隐藏 隐藏的元素虽然不显示，但是它的位置会依然保持九、字体font-size 用于设置字体的大小color：用于设置字体的颜色十、CSS盒子模型什么是盒子模型 所有HTML元素：我们都可以看成一个四边形，即一个盒子用CSS来设置元素盒子的内边距，边框，外边距的样式的方式，称为盒模型2、边框：border：HTML元素盒子的框体四个属性：broder-top：上边框broder-right：有边框broder-bottom：下边框broder-left：左边框通用设置（简写）一次性设置上下左右边框样式border:1px solid red; 1像素的实线红色边框3、内边距padding：HTML元素里的内容体到HTML元素边框的距离四个属性： padding-top： 上内边距padding-fight：右内边距padding-bottom：下内边距padding-left：左内边距通用设置（简写）一次性设置上下左右边框样式padding： 10px；4、外边距margin：HTML元素边框到其他HTML元素边框的距离四个属性： margin-top： 上外边距margin-fight：右外边距margin-bottom：下外边距margin-left：左外边距通用设置（简写）一次性设置上下左右边框样式margin： 10px；十一、CSS和HTML的结合方式内部样式 行内样式：通过标签的style属性来设置元素的样式格式： <html 标签 style="css样式代码"/>适用环境：更加针对性修改某个标签的效果<style></style>标签方式：当某些样式在页面中被多个标签重复使用，同意写入到style标签中格式：<style>css样式代码</style>使用环境：适合页面中进行样式复用外部样式<link/>链入式： .css为扩展名的外部样式表文件中，通过</link>引入格式：<link rel="stylesheet" type="text/css" href="css文件路径"/>rel="stylesheet" ：固定值，表示样式表type="text/css" ：固定值，表示CSS类型href="css文件路径" ： 表示CSS文件位置使用范围：不同页面进行样式复用
作业 1 palte 2 bento 3 #fancy 4 place apple 5 #fancy pickle 6 .small
