CSS学习记录2
2017-02-23 15:08
375 查看
1、分组选择器
标记选择器 类选择器 ID选择器 搭配使用
span,p,h1{color:#eee;}
<span></span>
<p></p>
<h1></h1>
2、派生选择器
通过父级找子级
div span{color:#eee;}
<div><span></span></div>
3、属性选择器
[name]{color="#eee";}
[name="username"]{color="#eee";}
input[name="username"]{color="#eee";}
<input type="text" name="username" value="" />
<input type="passwords" name="psd" value="" />
<textarea name="username"></textarea>
1、字体样式
颜色 color:
字号 font-size:
字体 font-family:Arail
font-family:"微软雅黑","隶书","楷书";
加"" 中文;带有空格或者其它符号
风格 font-style:normal;改斜归正
font-style:italic;文字倾斜
font-style:oblique;文本倾斜
字体粗细 font-weight:normal;由粗变细
font-weight:bold;由细变粗
2、文本样式
首行缩进 text-indent:2em; em是一个字号大小 1em=16px
对齐方式 text-align:left/center/right;
行高 line-height:30px;
字间距 word-sapcing:10px; 在中文(有空格的地方)
字母间距 letter-spacing:10px;中文(每个字)
字母大小写的转换 text-transform:uppercase 大写
text-transform:lowercase 小写
textt.-transform:capitalize 首字母大写
文本修饰 text-decoration:underline;下划线
text-decoration:overline;上划线
text-decoration:line-through;贯穿线(删除线)
3、背景
背景色
background-color:
英文
十六进制
rgb(0,0,0) 0-255
rgba(0,0,0,0.5) 带有透明,0-1 1没有透明度(背景色透明,字不透明)
opacity:0.5 背景色和字都透明
width:100px height:100px
背景图片
background-image:url(图片路径)
background-repeat:no-repeat; 不重复
background-repeat:repeat-x; 水平方向重复
background-repeat:repeat-y; 垂直方向重复
定位:background-position:100px 100px
background-position:100px 水平方向和垂直方向都是移动100px
固定数字 100px 50px; 水平向右移100px 垂直向下移动50px
百分比 10% 50%; 当前容器的百分比
关键字 left top; bottom center;right
background-position:left 另外一个值默认为center
标记选择器 类选择器 ID选择器 搭配使用
span,p,h1{color:#eee;}
<span></span>
<p></p>
<h1></h1>
2、派生选择器
通过父级找子级
div span{color:#eee;}
<div><span></span></div>
3、属性选择器
[name]{color="#eee";}
[name="username"]{color="#eee";}
input[name="username"]{color="#eee";}
<input type="text" name="username" value="" />
<input type="passwords" name="psd" value="" />
<textarea name="username"></textarea>
1、字体样式
颜色 color:
字号 font-size:
字体 font-family:Arail
font-family:"微软雅黑","隶书","楷书";
加"" 中文;带有空格或者其它符号
风格 font-style:normal;改斜归正
font-style:italic;文字倾斜
font-style:oblique;文本倾斜
字体粗细 font-weight:normal;由粗变细
font-weight:bold;由细变粗
2、文本样式
首行缩进 text-indent:2em; em是一个字号大小 1em=16px
对齐方式 text-align:left/center/right;
行高 line-height:30px;
字间距 word-sapcing:10px; 在中文(有空格的地方)
字母间距 letter-spacing:10px;中文(每个字)
字母大小写的转换 text-transform:uppercase 大写
text-transform:lowercase 小写
textt.-transform:capitalize 首字母大写
文本修饰 text-decoration:underline;下划线
text-decoration:overline;上划线
text-decoration:line-through;贯穿线(删除线)
3、背景
背景色
background-color:
英文
十六进制
rgb(0,0,0) 0-255
rgba(0,0,0,0.5) 带有透明,0-1 1没有透明度(背景色透明,字不透明)
opacity:0.5 背景色和字都透明
width:100px height:100px
背景图片
background-image:url(图片路径)
background-repeat:no-repeat; 不重复
background-repeat:repeat-x; 水平方向重复
background-repeat:repeat-y; 垂直方向重复
定位:background-position:100px 100px
background-position:100px 水平方向和垂直方向都是移动100px
固定数字 100px 50px; 水平向右移100px 垂直向下移动50px
百分比 10% 50%; 当前容器的百分比
关键字 left top; bottom center;right
background-position:left 另外一个值默认为center
相关文章推荐
- HTML/CSS学习记录(3)
- CSS学习记录3
- CSS_DIV学习记录2(用背景颜色实现一个网页的完整布局)
- css学习记录
- CSS 学习网站,按学习顺序记录,多做手
- CSS学习记录
- css学习记录
- CSS学习笔记录(1)
- 学习记录CSS :active 伪类
- CSS文本学习记录
- CSS学习记录1
- HTML/CSS学习记录(5)
- html5-CSS学习-background记录
- [学习记录][css]position
- CSS学习笔记录(1)
- 黑马程序员_学习记录20:HTML,JavaScript,CSS小结
- CSS学习记录4
- HTML/CSS学习记录(1)
- CSS基础学习记录
- css学习记录(css元素类型)