A今天我学到了什么
1css背景:
背景颜色:background-color
背景图片:backgorund-image
背景重复:background-repeat
背景吸附: background-attachment:fixed|scroll
背景位置:background-position: x y
//背景位置有两个参数,第一个参数表示背景图片离盒子x轴的距离,y表示背景图片离盒子y轴的距离
//参数可以传递left|right|top|bottom|center
以上可以简写为:
background: color image repeat position
举例://HTML
<div>hello world</div>
//css
<style>
div{
width:500px;
height:100px;
background:pink url(images/logo.png) no-repeat 100px 50px;
}
</style>
背景图片大小:
background-size: x y;
//x表示宽度,y表示高度
background-size:cover;
//此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
相当于background-size:100% 100%;
2css文本
text-align:文本对齐方式
text-align: right|left|center
text-decoration:文本修饰
text-decoration: underline|overline|line-through
text-transform:文本转换
text-transform:uppercase|lowercase|capitalize
text-indent:文本缩进
color:设置字体的颜色
body {color:red;}
颜色是通过CSS最经常的指定:
十六进制值 - 如: #FF0000
h1 {color:#00ff00;}
一个RGB值 - 如: RGB(255,0,0)
h2 {color:rgb(255,0,0);}
.注:rgba(255,0,255,0.1)a 代表文本透明清晰度
css字体
font-size:字体大小
font-style:字体样式
normal | italic
font-weight:字体粗细
normal | bold | lighter
line-height:行高
font-family:字体
p{font-family:Helvetica,Microsoft YaHei}
{ 可设置备用字体 如果浏览器不支持该字体会变成默认字体}
4css链接
4个链接如下
a:link - 正常,未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当鼠标悬停在链接上时
a:active - 链接被点击的那一刻
特注:a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
5css列表样式(仅限ul)
list-style:none;{样式 (none:清除小黑点)}
list-style-type:circle|square(空心圆、方块)
list-style-image:url("xxx"){图片}
6边框
border-width : 边框的宽度
border-style: 边框的样式
border-color :边框的颜色
(//以上可以简写成
border: width style color)
//边框-单独设置各边
p
{
border-top-style:dotted;
border-right-style:solid;
}
例://HTML
<p>
hello world
</p>
//CSS
p {
border-top-style: dotted;
border-right-style: solid;
border-top-width: 5px;
border-right-width: 5px;
border-top-color: red;
border-right-color: green;
width: 50px;
height: 50px;
}
7表格
border-collapse:属性设置表格的边框被折叠成一个单一的边框;
table{border-collapse:collapse}
//可以在td,th设置这个两个属性
colspan:value //跨越的列
rowspan:value //跨越的行
8透明
opacity:透明度
一般取值(o-1);
visibility:可见度
visibility:hidden(事物存在,但是隐藏了)
visibility:visible(事物可以看见)
display:none(事物确确实实不存在了)
9继承
1 width
width:如果子元素不设置宽,默认情况下继承父级元素的宽度
(仅仅只是块元素)
2 height
height:如果父级元素不设置高,默认情况下继承子元素高度
(父级继承所有子元素高度)
3css可继承的属性
文本相关属性
color,text-align,text-decoration,text-transform,
注:(text-indent)内联元素不能设置此属性
字体相关属性
font-family: ;font-size: ;font-style: ;font-weight:; line-height: ;
列表相关属性:list-style
表格相关属性:border-collapse
(直接对table进行修饰)
其他属性:
cursor:
//光标
visibility
//可见度
我今天掌握了什么
css常用样式
color:设置字体的颜色
body {color:red;}
颜色是通过CSS最经常的指定:
十六进制值 - 如: #FF0000
h1 {color:#00ff00;}
一个RGB值 - 如: RGB(255,0,0)
h2 {color:rgb(255,0,0);}
text-align:文本对齐方式
text-align: right|left|center
text-decoration:文本修饰
text-decoration: underline|overline|line-through(上划线/下划线/中划线)
text-transform:文本转换
text-transform:uppercase|lowercase|capitalize(大写字母、小写字母/首字母大写)
text-indent:文本缩进
边框
border-width : 边框的宽度
border-style: 边框的样式
border-color :边框的颜色
//以上可以简写成
border: width style color
p{border:1px solid #333 }
注://*边框-单独设置各边
p
{
border-top-style:dotted;
border-right-style:solid;
}
表格
border-collapse:属性设置表格的边框被折叠成一个单一的边框;
*table{border-collapse:collapse}
//可以在td,th设置这个两个属性
colspan:value //跨越的列
rowspan:value //跨越的行
文本相关属性:
color:
//字体颜色
text-align:left/right/center
//文本对齐方向
text-decoration: underline|overline|line-through
//文本修饰
text-indent:
//文本缩近
text-transform:uppercase|lowercase|capitalize
//文本转换
字体相关属性:
font-family:Helvetica,Microsoft YaHei
font-style:
//字体样式
font-size:
//字体大小
font-weight:
//字体粗细
line-height:
//行高
我今天掌握了什么
基本全掌握了