— Java攻城狮学习路线 —
一. 什么是CSS
CSS指层叠样式表(Cascading Style Sheets),定义如何显示HTML元素
二. CSS语法
/* 选择器 { 声明; 声明;}*/
h1 { color:blue;font-size:12px;}
/* 属性:值*/
样式
1.选择器
选择器优先级:内联>外联; id>类>元素>伪类
- id选择器
id选择器为标有特定id的HTML元素设置样式
#para1 {
text-align:center;
color:red;
}
- class选择器
选中同一class元素
.center {
text-align:center;
}
- 元素选择器
选中同一类元素
p {
text-align:center;
}
- 伪类和伪元素
<!-- 伪类语法 -->
selector:pseudo-class { property:value; }
selector.class:pseudo-class { property:value; }
<!--anchor 伪类 -->
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
<!-- 孩子选择 -->
p:first-child {color:blue;} /*p下第一个孩子*/
p:nth-child(2) {} /*p下第2个孩子(下标从1开始)*/
<!-- 伪元素语法 -->
selector:pseudo-element {property:value;}
selector.class:pseudo-element {property:value;}
<!--:first-line-->
p:first-line { color:#ff0000;} /* 对p的第一行文本进行格式化*/
<!--:first-letter-->
p:first-letter {color:#ff0000;} /*文本首字母设置样式*/
<!--:before-->
h1:before {content:url(smiley.gif);} /*元素前插入新内容*/
<!--:after-->
h1:after{content:url(smiley.gif);} /*元素后插入新内容*/
-属性选择器
/*通过属性设定样式*/
*把包含title属性的元素设置样式*/
[title] {
color:blue;
}
/* 改变title='run'元素样式*/
[title=runoob]{
border:5px solid green;
}
- 组合选择器
- 后代选取器
/*匹配所有后代相同元素(利用空格分隔)*/ div p { background-color:yellow; }
- 子元素选择器
/*只能匹配子元素中相同元素(利用>连接)*/ div>p { background-color:yellow; }
- 相邻兄弟选择器
<!--选择紧邻兄弟元素(利用+连接)--> div+p { background-color:yellow; }
- 普通兄弟选择器
/*选取所有指定元素后相邻兄弟元素(利用~连接)*/ div~p { background-color:yellow; }
2.背景
背景用于定义HTML元素的背景 - 背景颜色: background-color
body {background-color:#b0c4de;}
- 背景图像:background-image
body {background-image:url('paper.gif');}
- 背景水平或垂直平铺:background-repeat:repeat-x
body{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
- 背景不平铺:background-repeat:no-repeat
body{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
- 背景简写:依次为背景颜色、图片、不平铺...
body {background:#ffffff url('img_tree.png') no-repeat right top;}
3.文本
设置文字样式
- 文本颜色:color
/*设置文字的颜色*/
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
- 文本对齐方式:
/*设置文本水平对齐方式*/
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
- 文本修饰:
/*设置或删除文本的装饰*/
a {text-decoration:none;}
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
- 文本转换:
/*指定文本中的大写和小写字母*/
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
- 文本缩进:
/*指定文本的第一行的缩进*/
p {text-indent:50px;}
4.字体
定义字体加粗、大小、文字样式
- 字体系利:font-family
p{font-family:"Times New Roman", Times, serif;}
- 字体样式:font-style
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
- 字体大小:font-size
/*像素设置*/
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
/*em设置(1em=16px)*/
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
/*em和百分比设置*/
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
5.链接
- 链接样式
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
/*a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面*/
- 文本修饰
/*删除下划线*/
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
- 背景颜色
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
6.列表
- 不同列表项标记:list-style-type
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
- 作为列表项标记的图像:list-style-image
ul {
list-style-image: url('sqpurple.gif');
}
- 简写属性
ul {
list-style: square url("sqpurple.gif");
}
7.表格
- 表格边框:border
table, th, td {
border: 1px solid black;
}
- 折叠边框:border-collapse
table {
border-collapse:collapse;
}
- 表格宽度和高度:width和height
table {
width:100%;
}
th {
height:50px;
}
- 表格文字对齐:text-align
td {
text-align:right;
}
- 表格填充:padding
td {
padding:15px;
}
- 表格颜色:
table, td, th {
border:1px solid green;
}
th {
background-color:green;
color:white;
}
布局
1.盒子模型
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。
2.margin
- 单边外边距
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
- 简写
margin:25px 50px 75px 100px;
/* tips:居中显示 */
magin:0 auto;
3.padding
- 单边内边距
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
- 简写
padding:25px 50px 75px 100px;
4.border
- 边框样式:border-style
- 边框宽度:border-width
p.one {
border-style:solid;
border-width:5px;
}
p.two {
border-style:solid;
border-width:medium;
}
- 边框颜色:border-color
p.one {
border-style:solid;
border-color:red;
}
p.two {
border-style:solid;
border-color:#98bf21;
}
- 边框单独设置
p {
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
p {
border-style:dotted solid double dashed;
/*上 右 底 左*/
}
- 边框简写
border:5px solid red;
5.尺寸
设置元素的高度和宽度
- 设置元素高度:height
- 设置元素宽度:width
- 设置行高:line-height
- 设置元素最大高度:max-height
- 设置元素最大宽度:max-width
- 设置元素最小高度:min-height
- 设置元素最小宽度:min-width
6.显示
- display、visibility
<!--隐藏元素-->
h1.hidden {visibility:hidden;} /*仍占用空间*/
h1.hidden {display:none;} /*不占用空间*/
<!--改变元素显示-->
li {display:inline;}
span {display:block;}
7.定位
- static
/*静态定位的元素不会受到 top, bottom, left, right影响*/
position:static;
- fixed
/*元素的位置相对于浏览器窗口是固定位置*/
p.pos_fixed {
position:fixed;
top:30px;
right:5px;
}
- relative
/*相对定位元素的定位是相对其正常位置*/
/*相对定位元素经常被用来作为绝对定位元素的容器块*/
h2.pos_left{
position:relative;
left:-20px;
}
h2.pos_right{
position:relative;
left:20px;
}
- absolute
/*绝对定位的元素的位置相对于最近的已定位父元素,
如果元素没有已定位的父元素,那么它的位置相对于<html>*/
h2{
position:absolute;
left:100px;
top:150px;
}
/*absolute 定位使元素的位置与文档流无关,因此不占据空间。
absolute 定位的元素和其他元素重叠。*/
- sticky
/*吸附效果,类似relative和fixed结合*/
position:sticky;
- z-index
/*z-index属性指定了一个元素的堆叠顺序*/
z-index:-1;
8.浮动
可以实现图片排列及文字环绕
- 相邻浮动
div1 {
float:left;
width:110px;
height:90px;
}
div2 {
float:left;
width:110px;
height:90px;
}
- 清除浮动
div {
clear:both;
}
9.对齐
- 元素居中(margin:auto)
div {
margin: auto;
width: 50%;
border: 3px solid green;
}
- 文本居中(text-align:center)
text-align: center;
- 图片居中(margin: auto)
img {
display: block;
margin: auto;
width: 40%;
}
- 左右对齐-定位方式(position: absolute)
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
- 左右对齐-float方式
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
- 垂直居中-使用padding
.center {
padding: 70px 0;
border: 3px solid green;
}
- 垂直居中-使用line-height
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* 如果文本有多行,添加以下代码: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
- 垂直居中-使用position和transform
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
10.透明度
设置颜色透明度
opacity:0.5;
rgba(); /*a代表透明度*/