1、分组选择器
标记选择器 类选择器 ID选择器 搭配使用
span,p,h1{color:#eee}
<span></span>
<p></p>
通过父级找子级
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="password" 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; 由细变粗 500 700
2、文本样式
首行缩进 text-indent:2em; em 一个字号的大小
1em=16px
对齐方式 text-align:left/center/right;
行高 line-height:30px;
字间距 word-spacing: 10px; 中文(有空格的地方)
字母间距 letter-spacing:10px; 中文(每个字)
字母大小写的转换 text-transform:uppercase 大写
lowercase 小写
capitalize 首字母大写
文本修饰 text-decoration: underline; 下划线
overline 上划线
line-through 贯穿线(删除线)
3、背景
背景色
background-color:
英文
十六进制
rgb(0,0,0) 0-255 不带透明度
rgba(0,0,0,.6) 带有透明度 0-1 1没有透明度(背景色透明,字不透明)
opacity:0.4 (背景色和字都透明)
width:100px;
height:100px;
背景图片
background-image:url(图片的路径);
background-repeat:no-repeat; 不重复
repeat-x; 水平方向重复
repeat-y; 垂直方向重复
定位:background-position:100px 100px;
固定数字 100px 50px ; 水平向右移100px 垂直向下移动50px ;
百分比: 10% 50%; 当前容器的百分比
关键字 left top; bottom center right
若设置一个值时
标记选择器 类选择器 ID选择器 搭配使用
span,p,h1{color:#eee}
<span></span>
<p></p>
<h1></h1>
通过父级找子级
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="password" 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; 由细变粗 500 700
2、文本样式
首行缩进 text-indent:2em; em 一个字号的大小
1em=16px
对齐方式 text-align:left/center/right;
行高 line-height:30px;
字间距 word-spacing: 10px; 中文(有空格的地方)
字母间距 letter-spacing:10px; 中文(每个字)
字母大小写的转换 text-transform:uppercase 大写
lowercase 小写
capitalize 首字母大写
文本修饰 text-decoration: underline; 下划线
overline 上划线
line-through 贯穿线(删除线)
3、背景
背景色
background-color:
英文
十六进制
rgb(0,0,0) 0-255 不带透明度
rgba(0,0,0,.6) 带有透明度 0-1 1没有透明度(背景色透明,字不透明)
opacity:0.4 (背景色和字都透明)
width:100px;
height:100px;
背景图片
background-image:url(图片的路径);
background-repeat:no-repeat; 不重复
repeat-x; 水平方向重复
repeat-y; 垂直方向重复
定位:background-position:100px 100px;
固定数字 100px 50px ; 水平向右移100px 垂直向下移动50px ;
百分比: 10% 50%; 当前容器的百分比
关键字 left top; bottom center right
若设置一个值时
background-position:100px;第一个值为水平方向(向右移动100px),垂水平直方向默认center
小结:掌握了分组选择器,派生选择器,属性选择器,学习了字体样式,文本样式及其多种属性。