1、CSS介绍 概念：层叠样式表或者级联样式表(Cascading Stylr Sheets) 层叠;CSS特性 CSS作业：设置网页结构的样式（改变html标签的样式），通过CSS给HTML标签设置属性到改变样式 CSS书写位置介绍： * 内嵌式写法:书写在HTML的head位置 <style type="text/css">书写CSS代码</style> * 外链式写法 * 行内式写法 CSS语法： * 选择器 {属性：值；属性：值} 选择标签的过程 ** 标签选择器 ** 类选择器 ** id选择器 ** 通配符选择器 ** 交集选择器（标签指定式） ** 后代选择器 ** 子代选择器 ** 并集选择器 补充选择器(C3)： 伪类选择器： 属性选择器 伪元素选择器： * CSS样式的基本属性（字体属性，颜色属性，边框属性） ** 字体属性：主要包括字体综合设置、字体名称、字体大小、字体风格、字体加粗、字体英文大小写转换 font:设置或者检索对象中文本特性的复合属性 font-family:一个指定字体名称或者一个种类的字体名称(一次可以设置多个字体，字体与字体之间用“，”隔开) * 直接设置字体对应的名称（黑体，宋体） * 设置字体对应的英文名称（SimSun,NSimSun,SimHei） font-size：字体显示的大小 font-style:以3种方式的一种显示字体：normal(普通)、italic(斜体)和oblique(倾斜) font-weight:使字体加粗或者变细（normal，700-加粗，bold-加粗，400-正常显示） font-variant：设置英文大小写转换 ** 颜色和背景属性 CSS的颜色属性允许设计者指定页面元素的颜色，背景属性用于指定页面的背景颜色或背景图像的属性 color:设定页面颜色的前景色 background-cokor:设定页面元素的背景色 background-image:设定页面元素的背景图像 background-repeat:设定一个指定的背景图像被重复的方式 background-attachment:设定背景图像是的跟随页面滚动 background-position:谁当水平或者垂直方向上的位置 background:背景属性的综合指定 ** 边框属性 用于设置一个元素边框的宽度、样式和颜色 border 边框符合属性 border-top：上边框 border-left:左边框 border-right：右边框 border-bottom：下边框 border-color:边框颜色 border-style:边框样式 border-width：边框宽度 border-top-color：上边框颜色 border-bottom-color：下边框颜色 border-left-color:左边框颜色 border-right-color：右边框颜色 border-top-style：上边框样式 border-bottom-style：下边框样式 border-left-style:左边框样式 border-right-style：右边框样式 border-top-width：上边框宽度 border-bottom-width：下边框宽度 border-left-左边框宽度 border-right-width：右边框宽度 **边框样式属性 none:无边框 hidder：隐藏边框（IE不支持） dotted:边框由点组成 dashed:边框由短线组成 solid:边框是实线 double：边框是双实线 groove：边框带有立体感的沟槽 ridge：边框成脊型 inset：边框内嵌一个立体边框 outset:边框外嵌一个立体边框 * 标签选择器 HTML标签名 {属性：值；}:会把页面中的所有相同的标签都会选中 常用属性： color：设置前景色（文字颜色） background-color:设置背景色 font-size：设置文字大小 width：设置宽度 height：设置高度 text-align: center;设置内容（文字、图片）显示位置 注意：该属性只能给块级元素设置 text-indent: 2em; 设置首行缩进两个字符 <style type="text/css"> /*标签选择器*/ p { color: rgb(234,12,12); /*改变文字颜色*/ font-size: 50px; /*改变文字大小 */ background-color: #D82F92; /*改变背景颜色*/ width: 300px; /*设置宽度*/ height: 300px; /*设置高度*/ } </style> * 单位介绍 px:像素 em:1em = 一个文字大小 * 颜色的表示方式 ** 直接设置颜色的名称：red,green,pink ** 使用十六进制表示 #0-f ** 使用三原色rgb() r：0-255 g:0-255 b:0-255 ** 半透明颜色:background-color: rgba(0,0,0,0.5); rgba() a : 0-1 ** 使用opacity实现半透明 opacity:0-1 background-color: #D82F92; opacity: 0.5; filter:Alpha(opacity=50);/*IE8以及更早版本的浏览器*/ * 类选择器 .自定义类名 {属性：值；} 使用： ** 通过.自定义类名，定义一个类样式 .p_red { color: red;} ** 标签通过class属性调用类样式 <p class="p_red">类选择器1</p> 特点： ** 一个类样式可以被多个标签调用 ** 一个标签可以同时调用多个类样式，只需要在类名字之间加一个空格 <p class="p_red public_size">类选择器1</p> <p class="p_green public_size">类选择器2</p> 命名规范： 头;header 内容：content、container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度;wrapper 左右中;left right center 登录条：loginbar 标志:logo 广告：banner 页面主体：main 热点：hot 新闻：news 下载：download 子导航：subnav 菜单：menu 子菜单：submenu 搜索：search 友情链接：friendlink 页脚：footer 版权：copyright 注意：不能使用纯数字或者以数字开头定义类名 不能使用中文命名 不能使用特殊字符或者使用特殊字符开头定义类名 不推荐使用类名和标签名定义类名 * ID选择器(不建议用) 语法：#自定义名称 {属性：值；} 使用： ** 首先通过#自定义名称，定义一个id选择器样式 #p_color {color:red;} ** 标签通过id属性调用id样式 <div id="p_color">gerrynihao</div> ID选择器与类选择器的区别： ** 页面中标签的id必须唯一，不能重用样式的定义 ** 一个标签只能调用一个id样式，id选择器不能调用多个ID样式，类选择器可以调用多个类样式 * 通配符选择器 语法：* {属性：值；} 特点：该选择器会把所有标签都选中（包括body选择器） 应用：样式初始化使用（因为不同的浏览器有不同的默认样式，需要初始化页面的文字样式） * font属性联写 font:font-size font-weight font-style font-family line-height font:700(粗体) italic(斜体) 30px(字体大小)/20px(行高) 微软雅黑; 注意： 1.属性联写书写过程中必须要设置font-size和font-family，其他可以设置也可以不设置 2.在属性联写中font-size必须要放在font-family之前（例如：30px/20px 微软雅黑） 3.如果font属性联写中的属性都要设置，则按照上面顺序设置 * 复合选择器 **标签指定式选择器 语法： 标签名.类名 {属性：值；} 或者 标签名#id名 {属性：值；} div.one { color: red } ** 后代选择器 注意： 1,后代选择器标签之间必须是嵌套关系 2.选择器与选择器之间必须用空格隔开 3.后代选择器只能选择后代标签 语法： 选择器 选择器 选择器 {属性：值；} div p { color: green } * 并集选择器 语法： 选择器，选择器 {属性：值} 注意： 1.选择器与选择器之间必须用“，”隔开 2.选择器标签之间的结构可以是任意一种关系 * 子代选择器 语法： 选择器>选择器 {属性：值；} 注意： 1.子代选择器之间必须是嵌套结构 2.子代选择器只能选中直接后代元素 3.后代选择器可以选中所有后代元素 div>span { color: red; } * 属性选择器(会把页面中所有的属性相同的样式进行改变) 语法: [属性名] {属性：值；} [id][class] { color: red; } 属性其他选择器 [属性=值] {} [属性^=字母] { } 选中以字母开始的标签 [属性$=字母] { } 选中以字母结尾的标签 [属性*=字母] { } 选中包含字母的标签 * 伪类选择器（用于列表标签） ◇ 结构伪类 语法： 选择器：first-child {属性: 值;} 选择器：last-child {属性: 值;} 选择器: nth-child(n) {属性: 值;} 选择器:nth-last-child(n) {属性: 值;} 选择器:nth-child(odd) {属性: 值;} 奇数 选择器:nth-child(even) {属性: 值;} 偶数 ◇ 目标伪类 ◇ 空伪类 ◇ 排除伪类