1.背景格式
body{
background-color:#ffffff; #背景颜色
background-image:url('img_tree.png'); #背景图片
background-repeat:no-repeat; #图片是否平铺, repeat-x水平铺,默认是垂直铺,no-repeat不铺
background-position:right top; #图片位置
background-attachment:fixed #背景图像是否固定或者随着页面的其余部分滚动
}
scroll背景图片随着页面的滚动而滚动，这是默认的。fixed背景图片不会随着页面的滚动而滚动。local背景图片会随着元素内容的滚动而滚动。
简略写法:body {background:#ffffff url('img_tree.png') no-repeat right top;}
2.文本格式
body {
color:red;text-align:center;
text-decoration:underline;text-transform:uppercase;
text-indent:50px;letter-spacing:2px;line-height:90%;
word-spacing:10px;text-shadow:2px 2px #FF0000;direction:rtl;
}
注释:color 文本颜色，text-align对齐方式，text-decoration文字装饰（overline上划线,line-through中划线,underline下划线）text-transform：字母大小写转换（uppercase 大写，lowercase 小写，capitalize 首字母大写）text-indent：文本缩进 letter-spacing：设置字间距，line-height行高，word-spacing元素中空白的处理方式 text-shadow：阴影
3.字体
.font{font-style:normal;font-size:40px;font-weight:bold;}
注意:
font-weight:字体加粗(bold),normal(正常),lighter(字体变细)
font-style:normal(正常),italic(斜体)
4.超链接
a:link {color:#000000;text-decoration:none;} /* 未访问链接*/
a:visited {color:#00FF00;text-decoration:none;} /* 已访问链接 */
a:hover {color:#FF00FF;font-size:150%;background:green;text-decoration:underline;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;text-decoration:underline;} /* 鼠标点击时 */
注意:
1)a:hover 必须跟在 a:link 和 a:visited后面,a:active 必须跟在 a:hover后面
2)text-decoration下划线是否存在,none不存在,underline存在
5.列表样式:
1)list-style-type参数介绍:
lower-alpha(小写字母),upper-alpha(大写字母),lower-roman(小写罗马数字),upper-roman(大写罗马数字),none(没有样式),circle(空闲圆),square(方块),实心圆--->(默认)
2)list-style-image:将图像设置为列表项标志
3)list-style-position:设置列表中列表项标志的位置
6.表格
1)标题样式
caption {
caption-side:bottom; #标题的位置:top/bottom
font-size:25px;color:pink; #标题字体大小和颜色
text-align:right; #标题靠右居中
}
2)表格单元格样式设置:
td{
color:green; #字体颜色
background:red; #背景颜色
border:1px solid black; #td的边框颜色,像素,类型
text-align:center; #字体居中方式
vertical-align:bottom; #垂直对齐属性设置:bottom/top/middle
height:50px; #行高
}
3).表格的边框:
table{
border-collapse:collapse; #设置表格的边框是否被折叠成一个单一的边框或隔开
width:100%; #宽度
height:100%; #高度
border:1px solid red; #存在边框,如果单元格th,td设置了边框,.表格table可以省略,如果只设置table有表格,th,td没有,那只有外边框.
}
7.css盒子模型介绍:
css盒子模型
介绍盒子模型的构造:
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
7.1)margin(外边距)和padding(内边距)介绍:
margin(外边距)和padding(内边距)介绍
margin:
margin:25px; #上下左右外边距:25px
margin:25px 50px; #上下外边距:25px,左右外边距:50px
margin:25px 50px 70px; #上外边距:25px,左右外边距:50,下外边距:70px
margin:3cm 2cm 5cm 5cm; #上外边距:3cm,右外边距:2cm,下外边距:5cm,左外边距:7cm
margin-top上外边距;margin-bottom:下外边距;margin-right:右外边距;margin-left:左外边距;
padding:
padding:25px; #上下左右内边距:25px
padding:25px 50px; #上下内边距:25px,左右内边距:50px
padding:25px 50px 70px; #上內边距:25px,左右內边距:50,下內边距:70px
padding:3cm 2cm 5cm 5cm; #上內边距:3cm,右內边距:2cm,下內边距:5cm,左內边距:7cm
padding-top(上內边距)padding-bottom(下內边距)padding-right(右內边距)padding-left(左內边距);
7.2-border(边框样式)
border-style:solid; #边框样式,dotted(点线边框),dashed(虚线边框),solid(实线边框),double(双边框)
border-width:1px; #边框的宽度
border-color:red; #边框的颜色
(border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式)
以上三个等价于: border:1px solid red;--------->所有边框设置样式
单独设置每条边框的样式:
border-top:thick solid #ff0000; #上边框样式
border-bottom:thick double yellow; #下边框样式
border-right:thick dashed green; #右边框样式
border-left:thick dotted grey; #左边框样式
7.3 outline样式
outline样式
此处占满了就是margin
outline:1px solid red;--------->宽度,样式(和边框border一样),颜色
8.嵌套选择器
p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class="marked" 的元素指定一个样式。
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
9.元素显示还是隐藏(display),可见还是隐藏(visibility)
h1.hidden {visibility:hidden;} #实例中的隐藏标题h1的内容仍然占用空间,
h1.hidden {visibility:collapse;} #实例中的隐藏标题h1的内容不占用空间
h1.hidden {display:none;} #实例中的隐藏标题h1的内容不占用空间
li{display:inline;} #将列表元素内容由纵向显示变成横向显示
a{display:block;} #将元素中内容由横向显示变成纵向显示
10.position 位置
1) position: static; 无特殊定位，遵循正常的文档流对象
2)fixed 定位:元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动
p.pos_fixed{
position:fixed; #固定位置
top:30px; #位置高的距离
right:5px;} #位置右的距离
3)relative 定位:相对定位元素的定位是相对其正常位置
h2.pos_left{
position:relative; #相对定位元素
left:-20px; #从元素的原始左侧位置减去 20 像素,如果是正数就向左增加20px
}
4)absolute 定位:绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
h2{ position:absolute;
left:100px;
top:150px;}
5) sticky 定位:基于用户的滚动位置来定位
div.sticky {
position: sticky;
top: 0;}
6)重叠元素:z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序
img{ position:absolute;
left:0px;
top:0px;
z-index:-1;} #正数显示在后面,不会被覆盖,负数可以被覆盖
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面
11.鼠标的各种状态:
p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
12.overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条
div {
background-color: #eee;
width: 200px;
height: 50px;
overflow: visible;}
visible默认值。内容不会被修剪，会呈现在元素框之外
hidden内容会被修剪，并且其余内容是不可见的
scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit规定应该从父元素继承 overflow 属性的值
13. Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列
.thumbnail {
float:left;} #向左浮动
.text_line{
clear:both;} #取消浮动
13.居中---->尤其是div中的内容居中*******
14.css组合选择符
在 CSS3 中包含了四种组合方式:后代选择器(以空格分隔),子元素选择器(以大于号分隔）,相邻兄弟选择器（以加号分隔）,普通兄弟选择器（以破折号分隔）
1)后代选择器(空格分割)------>后代选择器用于选取某元素的后代元素:
div p{
color:red;} #作用于所有div中的p元素
2)子元素选择器(以大于号分隔）------>只能选择作为某元素子元素的元素
div>p{
color:red;} #只作用所有于div中一级子元素p,在以下一级就不会应用
<div><p>123</p><b><p>456</p></b></div> #只作用123,456没效果.
3)相邻兄弟选择器（以加号分隔）------>可选择紧接在另一元素后的元素，且二者有相同父元素
div+p{
color:green;} #选取了所有位于 <div> 元素后的第一个 <p> 元素
4)普通兄弟选择器（以破折号分隔）----->选取所有指定元素之后的相邻兄弟元素
div~p{
color:black;} #选取了所有 <div> 元素之后的所有相邻兄弟元素 <p>
css组合选择符
15.伪类
1)anchor伪类
a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS 语法</a> ---->有red类的链接访问后的样式
a:visited {color:#FF0000;} --------------->所有链接访问之后的样式
2)first-child 伪类:(选择父元素的第一个子元素):
p:first-child{ color:blue;} #任何元素的第一个子元素的 <p> 元素
p > i:first-child{ color:blue;} #选择相匹配的所有<p>元素的第一个 <i> 元素
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
选择相匹配的所有<p>元素的第一个 <i> 元素
p:first-child i{ color:blue;}
#选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素
:checked input:checked 选择所有选中的表单元素
:disabled input:disabled 选择所有禁用的表单元素
:empty p:empty 选择所有没有子元素的p元素
:enabled input:enabled 选择所有启用的表单元素
:first-of-type p:first-of-type 选择的每个 p 元素是其父元素的第一个 p 元素
:in-range input:in-range 选择元素指定范围内的值
:invalid input:invalid 选择所有无效的元素
:last-child p:last-child 选择所有p元素的最后一个子元素
:last-of-type p:last-of-type 选择每个p元素是其母元素的最后一个p元素
:not(selector) :not(p) 选择所有p以外的元素
:nth-child(n) p:nth-child(2) 选择所有 p 元素的父元素的第二个子元素
:nth-last-child(n) p:nth-last-child(2) 选择所有p元素倒数的第二个子元素
:nth-last-of-type(n) p:nth-last-of-type(2) 选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n) p:nth-of-type(2) 选择所有p元素第二个为p的子元素
:only-of-type p:only-of-type 选择所有仅有一个子元素为p的元素
:only-child p:only-child 选择所有仅有一个子元素的p元素
:optional input:optional 选择没有"required"的元素属性
:out-of-range input:out-of-range 选择指定范围以外的值的元素属性
:read-only input:read-only 选择只读属性的元素属性
:read-write input:read-write 选择没有只读属性的元素属性
:required input:required 选择有"required"属性指定的元素属性
:root root 选择文档的根元素
:target #news:target 选择当前活动#news元素(点击URL包含锚的名字)
:valid input:valid 选择所有有效值的属性
:link a:link 选择所有未访问链接
:visited a:visited 选择所有访问过的链接
:active a:active 选择正在活动链接
:hover a:hover 把鼠标放在链接上的状态
:focus input:focus 选择元素输入后具有焦点
:first-letter p:first-letter 选择每个<p> 元素的第一个字母
:first-line p:first-line 选择每个<p> 元素的第一行
:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的 <p> 元素
:before p:before 在每个<p>元素之前插入内容
:after p:after 在每个<p>元素之后插入内容
:lang(language) p:lang(it) 为<p>元素的lang属性选择一个开始值
16.下拉菜单
.dropbtn { #按钮的样式
background-color:red;
color: yellow;
padding: 20px;
font-size: 20px;
border: solid 2px green;
cursor: pointer; #鼠标变化--->变成小手样式}
.dropdown {
position: relative; #这将设置下拉菜单的内容放置在下拉按钮
display: inline-block; #行显示}
.dropdown-content {
#类中是实际的下拉菜单,默认是隐藏的,在鼠标移动到指定元素后会显示(默认隐藏)
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); }
# box-shadow 属性让下拉菜单看起来像一个"卡片"
.dropdown-content a { #类是 dropdown-content元素下面的a属性样式
color: yellow;
padding: 10px 20px;
text-decoration: none; #没有超链接的横线
display: block;}
.dropdown-content a:hover {background-color:green} #指向超链接背景颜色变化
.dropdown:hover .dropdown-content { display: block;}
# 当类 dropdown被指向后 类是 dropdown-content的样式
.dropdown:hover .dropbtn { background-color: #3e8e41;}
#当类 dropdown被指向后，按钮背景颜色变化
<div class='dropdown' style="float:right;">
<button class='dropbtn'>下拉菜单2</button>
<div class='dropdown-content'>
<a href='http://www.baidu.com'>百度1</a>
<a href='http://www.baidu.com'>百度2</a>
<a href='http://www.baidu.com'>百度3</a>
</div>
</div>
17.提示工具类似于下拉菜单---->主要搞明白提示框出现的位置
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 100px;
background-color: red;
color: yellow;
text-align: center;
border-radius: 6px;
padding: 10px 0;
/* 定位 */
position: absolute;
z-index: -1; #如果重叠覆盖规则。-1被覆盖，1不被覆盖
top: 100%;
left: 50%;
margin-left: -60px; #/* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
opacity: 0; #淡入淡出效果
transition: opacity 1s;}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent red transparent ;} #指定提示框箭头的位置（下，左上右）
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;} #淡入淡出效果
html内容:
<div class="tooltip">鼠标移动到这 <span class="tooltiptext">提示文本</span> </div>
18.图片透明度
img{ opacity:0.4;
filter:alpha(opacity=40); /* IE8 及其更早版本 */}
img:hover{ opacity:1.0;
filter:alpha(opacity=100); /* IE8 及其更早版本 */}
# Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明
#IE8和早期版本使用滤镜：alpha（opacity= x）。 x可以采取的值是从0 - 100。较低的值，使得元素更加透明
19.属性选择器
[title] { color:blue;} #把包含标题（title）的所有元素变为蓝色
[title='hello'] { color:blue;} #改变了标题title='hello'元素的边框样式，精确匹配
[title~=hello] { color:blue; } #使用（~）分隔属性和值,必须作为单独的一个词hello存在,才被匹配
比如: 'hello world'
[lang|=en] { color:blue; } #模糊匹配~只要值有en就被匹配到(不必作为单独一个词en-*)
20.表单
input[type=text] {
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus { width: 100%;}
#输入框在获取焦点时会向右延展
2)文本框不可以自动调节大小
textarea { width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;} # resize 属性来禁用文本框可以重置大小的功能
21.计数器
<style>
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h1>HTML 教程:</h1>
<h2>HTML 教程</h2>
<h2>CSS 教程</h2>
<h1>Scripting 教程:</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>
<h1>XML 教程:</h1>
<h2>XML</h2>
<h2>XSL</h2>
counter-reset - 创建或者重置计数器
counter-increment - 递增变量
content - 插入生成的内容
counter() 或 counters() 函数 - 将计数器的值添加到元素
网友评论