css基础知识
2017-12-22 15:49
417 查看
基本选择器
标签选择器p {color: "red";}
ID选择器
#i1 { background-color: red; }
类别选择器
.c1 { font-size: 14px; } p.c1 { color: red; }
通用选择器
* { color: white; }
层级选择器
组合选择器/*为所有的div和p标签设置边框属性*/ div, p { border: 1px solid red; }
后代选择器
/*li内部的a标签设置字体颜色*/ li a { color: green; }
儿子选择器
/*选择所有父级是 <div> 元素的 <p> 元素*/ div>p { font-family: "Arial Black", arial-black, cursive; }
毗邻选择器
/*选择所有紧接着<div>元素之后的<p>元素*/ div+p { margin: 5px; }
弟弟选择器
/*i1后面所有的兄弟p标签*/ #i1~p { border: 2px solid royalblue; }
属性选择器
/*用于选取带有指定属性的元素。*/ p[title] { color: red; } /*用于选取带有指定属性和值的元素。*/ p[title="213"] { color: green; } /*用于选取属性值包含指定值的每个元素*/ div[class~="c2"] { color: red; } /*用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。*/ div[class|="c2"] { color: red; } /*匹配属性值以指定值开头的每个元素*/ div[class^="my"] { color: red; } /*匹配属性值以指定值结尾的每个元素*/ div[class$="s"] { color: red; } /*匹配属性值以指定值结尾的每个元素*/ div[class$="s"] { color: red; } /*匹配属性值包含指定值的每个元素*/ div[class*="sb"] { color: red; }
伪类选择器
a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */
选择器的优先级
css文本
文本颜色颜色属性被用来设置文字的颜色。 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如: red
水平对齐
text-align 属性规定元素中的文本的水平对齐方式。 left 把文本排列到左边。默认值:由浏览器决定 right 把文本排列到右边 center 把文本排列到中间 justify 实现两端对齐文本效果
/* font-size: 10px; line-height: 200px; 文本行高 通俗的讲,文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比 vertical-align:-4px 设置元素内容的垂直对齐方式 ,只对行内元素有效,对块级元素无效 text-decoration:none text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线 font-family: 'Lucida Bright' font-weight: lighter/bold/border/ font-style: oblique text-indent: 150px; 首行缩进150px letter-spacing: 10px; 字母间距 word-spacing: 20px; 单词间距 text-transform: capitalize/uppercase/lowercase ; 文本转换,用于所有字句变成大写或小写字母,或每个单词的首字母大写 */
背景属性
/*背景颜色*/ background-color: red; /*背景图片*/ background-image: url('1.jpg'); /* 背景重复 repeat(默认):背景图片平铺排满整个网页 repeat-x:背景图片只在水平方向上平铺 repeat-y:背景图片只在垂直方向上平铺 no-repeat:背景图片不平铺 */ background-repeat: no-repeat; /*背景位置*/ background-position: right top(20px 20px);
边框
#i1 { border-width: 2px; border-style: solid; border-color: red; }
#i1 { border: 2px solid red; }
#i1 { border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:none; }
display属性
注意与visibility:hidden的区别:visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。
display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。
display=”block”
将内联标签设置为块级标签
display=”inline”
块级标签设置为内联标签
display=”inline-block”
行内块元素
margin
.margin-test { margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; }
.margin-test { margin: 5px 10px 15px 20px; }
.mycenter { margin: 0 auto; }
padding
.padding-test { padding-top: 5px; padding-right: 10px; padding-bottom: 15px; padding-left: 20px; }
.padding-test { padding: 5px 10px 15px 20px; }
顺序:上右下左
补充:
提供一个,用于四边; 提供两个,第一个用于上-下,第二个用于左-右; 如果提供三个,第一个用于上,第二个用于左-右,第三个用于下; 提供四个参数值,将按上-右-下-左的顺序作用于四边;
float
left:向左浮动right:向右浮动
none:默认值,不浮动
clear语法:
clear : none | left | right | both
取值:
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
但是需要注意的是:clear属性只会对自身起作用,而不会影响其他元素。
父标签塌陷问题
.clearfix:after { content: ""; display: block; clear: both; }
定位
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>定位</title> <style> * { margin: 0; padding: 0; } .c1 { height: 100px; width: 100px; background-color: red; } .c2 { height: 100px; width: 100px; background-color: green; position: relative; left: 100px; top: 100px; } .c3 { height: 100px; width: 100px; background-color: blue; } </style> </head> <body> <div class="c1">c1</div> <div class="c"> <div class="c2">c2</div> </div> <div class="c3">c3</div> <div class="returnTop">返回顶部</div> </body> </html>
效果图:
代码改成如下:
.c2 { height: 100px; width: 100px; background-color: green; position: absolute; left: 100px; top: 100px; }
代码添加如下:
.c { height: 100px; width: 100px; background-color: black; position: relative; }
效果如下:
zindex
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>z-index 模态框示例</title> <style> .cover { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 999; } .modal { height: 100px; width: 100px; position: fixed; background-color: white; z-index: 1000; /*确保我的模态框一定在cover上层*/ } </style> </head> <body> <div class="cover"></div> <div class="modal"></div> </body> </html>
磨砂
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>磨砂背景</title> <style> body { background: url("beijing.png") no-repeat ; background-size: cover; height: 720px; } .cover { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0, 0.5); } </style> </head> <body> <div class="cover"></div> </body> </html>
相关文章推荐
- 黑马程序员_java基础笔记(09)...HTML基本知识、CSS、JavaScript、DOM
- 前端系列之CSS基础知识概述
- 黑马程序员_java基础笔记(09)...HTML基本知识、CSS、JavaScript、DOM
- CSS基础知识
- HTML基础知识四( 内嵌入式框架、 滑动字幕、多媒体元素、CSS)
- css 基础知识
- CSS的一些基础知识
- 有关表单与CSS的基础知识及实例应用(新手,有待完善...)
- CSS 层叠样式表 基础知识
- CSS基础知识总结--《CSS权威指南》阅读笔记(二)
- 第一天 XHTML CSS基础知识
- CSS基础知识
- CSS基础知识
- 第一天 XHTML CSS基础知识
- DIV+CSS网页布局常用的一些基础知识整理
- CSS基础知识
- CSS基础知识
- “阿一web标准学堂”第4课:HTML和CSS基础知识(1)(附视频、课件、代码下载)
- 前端-CSS基础知识(一)
- 前端css基础知识(4)