CSS
jerry
2020-11-04
CSS CSS简介 注释 基本选择器 尺寸样式属性 文本属性 字体属性 列表样式属性 继承性 继承优先级 背景样式属性 标准文档流 浮动 盒子模型 padding margin margin塌陷现象 margin居中 善于使用父元素的adding而不使用子元素的margin border属性 display属性 display属性的综合案例 固定定位 相对定位 绝对定位 使用绝对定位来实现拉手网上的效果 z-index属性 结构伪类 border-collapse 伪元素 文本阴影 舒阴影 圆角矩形 圆角矩形案例 透明度 Cascading Style Sheets(层叠样式表), 用于控制网页样式并允许将样式信息与网页 内容分离的一种标记性语言 作用 : 给HTML网页设置外观或者样式, 即网页中文字的大小, 颜色, 字体, 网页背景 颜色, 背景图片等 CSS代码书写方式 <style> </style>放在head标签里面 嵌入式 外链式 行内式 放在其他地方不会错误, 但都规范放在head里 <link /> <link rel="stylesheet" type="text/css" href = "CSS文件地址"> 文件地址可以是本地的,也可以是http:/*** 将.css链接到html文件里 .css文件中只能书写CSS代码 CSS语法 选择器 {属性 : 属性值 ; 属性 : 属性值;} 例 : h1 {color:blue; font-size:12px; } 确认CSS或其他文件正确加载 : Chrome为例: 右键选择检查→Network→刷新网页, 下面会显示所有加载的文件, status为Finished的为加载成功 link标签可以有多个, 一个html可以加载多个css文件 将CSS代码写在HTML标签的style属性中, stytle是通用属性, 每个标签都可以有 语法 : <标签名 style="属性: 值; 属性: 值; "> </标签名> 特点 : 一个.css文件可以作用与多个html文件 /* 注释内容 */ 注意 : 不能再CSS代码里使用HTML的注释 选择器是指通过语法规则选取到对应的HTML标记, 然后给这个对应的HTML标记设 置样式 基本选择器 复合选择器 伪类选择器 属性选择器 通用选择器 标签选择器 类选择器 id选择器 *{属性: 值 ;} 例 : *{margin: 0px} 将配配HTML所有标签, 不建议使用 标签名{属性: 值 ;} 例 : h1 {font-size: 14px ;} 匹配对应的HTML标签 .class属性值{属性: 值 ;} 给有指定CLASS属性值的元素设置样式, 用得很多 例 : .box{width: 800 ;} #id属性值{属性: 值 :} 例 : #title{font-size: 14 ;} 为标有特定id的HTML元素指定样式, id是唯一的,只能使用一次, id选择器以"#"来定 义 p.box{width: 700 ;} class值为box的p标签 所有class值为box的标签 height width auto : 自动,浏览器自动计算高度 length : 使用px定义高度 % : 基于包含它的块级对象的百分比高度 color 给文本设置颜色 text-align left, right, center 设置文本水平对齐方向 属性值 : #ff0000或red或rgb(3,5,8) text-decoration non(去掉文本修饰线), underline(下划线), line-through(删除线) 大小写转换或者首字母大写 line-height 属性值 : 固定值或百分比 设置行高 text-indent px或em(一个em表示一个汉字的位置), 设置首行缩进, 允许负值 letter-spacing px, 设置字符间距 word-spacing px, 设置单词间距 font-style 值 : normal(正常), (italic)斜体 设置文本为斜体 font-weight normal, bold(粗体) 设置文字粗细 font-size px, 设置字体大小 font-family 微软雅黑, 楷体, 宋体 设置字体,能否正常显示看用户电脑是否有该字体 font 例 : font: italic bold 14px "宋体" ; 简写上面所有属性 选择器1, 选择器2 {属性: 值} 多元素选择器 后代元素选择器 子元素选择器 相邻元素选择器 例 : p, h1, h2{margin: 0px ;} 同时匹配多个选择器 #slidebar p{font-color: #990000 ;} E F{属性: 值 ;} 匹配所有属于E元素后代的F元素 E>F{属性: 值 ;} 匹配所有E元素的子元素 div > p{color: #990000 ;} E+F{属性: 值 ;}{属性: 值 ;} div+div{color: #990000 ;} 匹配紧随E元素后的同级元素F 无序列表 有序列表 list-style-type none(去掉列表前符号), disc(实心圆), square(实心小方块), circle(空心圆) 设置列表前标注符号类型 list-style-position inside(在里面), outside(在外面) 设置列表项放置的位置 list-style-image url(图像路径) 将图像设置为列表项标记 list-style square inside url(allow.gif) 在一个声明中设置所有列表属性 background-color 值 :#ff0000, red, rgb(255,0,0) 设置背景颜色 background-image 值 :url(图像路径和名称) 设置背景图片 background-repeat 值 : repeat, repeat-x, repeat-y, no-repead 设置图片平铺方式或不平铺 background-position center center或x% y%或xpos ypos 设置背景图片起始位置 background-attachment scroll(滚动), fixed(固定) 设置背景是否随页面滚动 background url(bg.jpg no-repeat ;) 背景图片简单写法 background-size 用来给超级链接的不同状态来设置样式 :link 向未被访问的链接添加样式, 如: a:link{color: red;} :visited 向已被访问的链接添加样式 :hover 鼠标悬停上方时的样式 :active 点击瞬间样式 通过标签的属性名和属性值来匹配元素 [attr] attribute(简写), 匹配所有具有attr属性的元素 例 : [align][type]{ } [attr = "val"] 匹配所有attr属性等于value的元素 [attr^="val"] 例 : h1[align="center"]{ },也可以 [align="center"]{ } 匹配元素中attr属性一指定值开头的所有元素 Font[color^="#ff"] [attr$="val"] [attr*="val"] 匹配元素中attr属性一指定值结尾的所有元素 匹配元素中attr属性一包含指定值的所有元素 div是内层元素继承自外层元素body, ps: 输入div>h2+p 回车可生成标签(需编辑 器支持) 外层元素的样式会被内存元素继承, 只有文本与字体样式会被继承 内层元素属性的优先级高于外层元素 选择器优先级 行内样式(1000)>ID选择器(100)>类选择器(10)>标签选择器(1) 一般而言, 指向越准确,优先级越高 后面的数字为权重值, 越大优先级越高, 复合选择器的权重值为所有标签相加 important属性 属性: 值 !important 表示该属性优先级最高, 即权重值无穷大 一个标签可有多个类名: <div class="div1 div2"> 对于有多个类名的标签, 多个类名又定义了同样的属性, 则CSS中类选择器写在后面 的属性生效 注意 空白折叠现象 解决: 把标签放在同一行 高矮不齐, 底部对齐 从左到右, 从上到下 浮动元素脱离了标准文档流, 不再占用空间, 层级比标准文档流高, 会将其盖住, 所以 需要清除浮动 遇到父元素边框或上一个浮动元素就停止了浮动 float : 值 值 : right, left 很多时候标签的默认内填充与外边距会影响到排版布局, 可用通用选择器去除 *{ margin: 0px; padding: 0px ; } 清除浮动 只要有浮动, 就必须要清除浮动 因为浮动的元素会影响它下面元素的排版布局, 浮动元素的父元素没有将浮动元素 包裹着 三种清除浮动的方法 给浮动元素的父元素设置一个固定高度, 但是不建议这样使用, 一个元素的高度不应 该是手动设置的 浮动元素下面新建一个空白div， 只添加清除浮动样式属性 clear clear:left ; (清除左浮动) clear:right ; (清除右浮动) clear:both ; (两边都清除) 使用 overflow:hidden 属性来清除浮动 , (原本的属性是将溢出宽高的元素隐藏)