字体样式、文本样式、块级元素和行内元素、伪类、背景、列表
2016-07-26 10:30
519 查看
字体样式
属性 含义 示例
font-family 设置字体类型 font-family:"隶书"
font-size 设置字体大小 font-size:12px
font-style 设置字体风格 font-style:italic; 斜体
font-weight 设置字体粗细 font-weight:bold;
font 在一个声明中设置所有字体属性 font:italic bold 36px "宋体";
font简写，可以按顺序设置如下属性：
font-style;font-weight;font-size;font-family
所以font:italic bold 25px cursive,"微软雅黑"等同于font-sizee=25px;
font-family:cursive,"微软雅黑";font-style:italic;font-weight:bold;
Font-family的值可以设置多个，它会查找系统有哪些，然后从前到后按照第一个系统有的输出，英文的字体则用英文的字体格式，中文则用中文格式。若网页内容中同时有中文和英文，则英文的字体格式放在中文字体格式前面
span和p不一样：
span不会独占一行，p会独占一行
例如：
<p>这是一首<p id="id1">思恋</p>家乡的诗歌</p>
<p>这是一首<span id="id1">思恋</span>家乡的诗歌</p>
这两者的的区别，第一个呈现两行，而第二个会呈现一行
行内元素：不会独占一行，如:span很常用
块级元素：会独占一行，如:p、还有很常用的块级元素<div>
区别:(1)行内元素不会独占一行，而块级元素会独占一行
(2)块级元素可以设置宽高，但行级(行内)元素设置宽高不起作用
div标签一般会应用在：
网页布局
排版网页内容
格式：<div></div>
div标签常用属性：weight，height，border
文本样式
属性 含义 示例
color 设置文本颜色 color:#00C;
text-align 设置元素水平对齐方式 text-align:right;
text-indent 设置首行文本的缩进 text-indent:20px;
text-indent:2em; 移动2个汉字，空两格
line-height 设置文本的行高(行间距) line-height:25px;
text-decoration 设置文本的装饰 text-decoration:underline; 下划线
text-decoration:line-through; 打折线
text-indent:2em; 移动2个汉字，em应用在汉字，1em代表1个汉字的高度，汉字是方块字
Line-height一般结合div标签使用
CSS设置超链接
伪类语法
标签名:伪类名{声明;}
例：
a:hover{
color:red;
text-decoration:underline;
}
这句代表：鼠标移到超链接上面时，链接显示转变为红色，并且有下划线
伪类
伪类名称 含义
a:link 未单击访问时超链接样式
a:visited 单击访问后超链接样式
a:hover 鼠标悬浮其上的超链接样式
a:active 鼠标单击未释放的超链接样式
css设置超链接的顺序：a:link、a:visited、a:hover、a:active,如果不按这顺序，可能样式起不来
怎么记忆：先爱后恨 love hate
常见的开发中的使用：超链接未被访问、鼠标悬浮到超链接上面
a:link{ 等同于 a{
设置的样式 设置的样式
} }
CSS设置鼠标形状 属性: cursor:属性值 cursor鼠标
在标签中使用内联样式是要加style属性。如:<p style=”cursor:pointer”></p>
背景属性
背景颜色:background-color:#B70447;
背景图像
-图像路径:background-image:url(img/buy.png);
-重复方式:background-repeat:no-repeat;
-背景定位:background-position:10px 15px;
例子：
background-color:transparent; 透明色
background-repeat:repeat-x 以x轴横向平铺
background-position:top left 默认值为左上
值可以取关键字也可以是像素值，关键字和像素值可以混合使用
像素值:px
关键词:
水平方向:left、center、right
垂直方向:top、center、bottom
background-position:10px 15px; 指的是相对于左上角背景图像的偏移量，向右偏移10像素，向左偏移15像素。（先往横向的偏移再往竖向的偏移）
注意：要查看是先往哪偏移可以先固定一个值，再改变另一个值，再通过浏览器看效果
注意事项：
当同时设置背景图片和背景颜色时，背景图像是高于背景颜色的（即显示的是背景图像）
列表 一般会应用在商品分类等
有序列表 <ol> /*order list*/
<li></li>
</ol>
无序列表 <ul> /*unorder list*/
<li></li>
</ul>
自定义列表 <dl> /*definition list*/
<dt></dt> /* definition title自定义标题*/
<dd></dd> /* definition description
自定义内容描述*/
</dl>
例：可以查看京东商城全部商品分类某一项的，查看元素
<dl>
<dt>这个是自定义内容标题</dt>
<dd>这个是自定义内容描述</dd>
</dl>
<dl>
<dt>所属学院</dt>
<dd>计算机应用</dd>
<dt>所属专业</dt>
<dd>计算机软件工程</dd>
</dl>
希望把列表真正的变为网页中的效果需要加上样式
列表样式
list-style-type 列表项的类型
list-style-image 列表项的图标
list-style-position 列表项的位置
list-style
要记住:list-style-type、list-style
list-style-image:url(“image/1.jpg”)
inside相当于在列表项的里面
outside相当于在列表项的外面
样式：
li{
border:1px solid red;
}
ul{
list-style-position:inside;
}
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
制作京东首页左侧菜单
使用列表、背景样式制作菜单
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>仿京东左侧菜单</title>
<style>
*{padding:0;margin:0;} /*所有元素都可以使用这个样式，去除网页中所有元素的默认样式，例如h1标签使用，加上这个样式会顶上去*/
a{text-decoration:none;color:#fff;}
.nav-box{width:210px;}
.nav-top{
height:45px;
font-size:16px;
line-height:45px; /*想让一个元素里面的文字居中可以让元素的hegiht和line-height取值一样*/
padding:0 10px;
background:#B1191A;
color:#fff;
}
ul{
List-style-type:none;
Background:#c81623;
}
Li{
Border:yellow;
Height:30px;
Line-height:30px;
Font-size:14px;
Padding-left:8px; 内容左边距离边框填充8px的空白
Color：#fff；
Background:url(“jiantou.jpg”) no-repeat 195px center;
}
</style>
</head>
<body>
<div class="nav-box">
<div class="nav-top">全部商品分类</div>
<ul>
<li><a href="">家用电器</a></li>
<li><a href="">手机</a>、<a href="">数码</a>、<a
href="">京东通信</a></li>
<li><a href="">电脑</a>、<a href="">办公</a></li>
<li><a href="">家居</a>、<a href="">家具</a>、<a
href="">家装</a>、<a href="">厨具</a></li>
<li><a href="">男装</a>、<a href="">女装</a>、<a
href="">珠宝</a></li>
<li><a href="">个护化妆</a></li>
<li><a href="">鞋靴</a>、<a href="">箱包</a>、<a
href="">钟表</a>、<a href="">奢侈品</a></li>
<li><a href="">运动户外</a></li>
</ul>
</div>
</body>
</html>
属性 含义 示例
font-family 设置字体类型 font-family:"隶书"
font-size 设置字体大小 font-size:12px
font-style 设置字体风格 font-style:italic; 斜体
font-weight 设置字体粗细 font-weight:bold;
font 在一个声明中设置所有字体属性 font:italic bold 36px "宋体";
font简写，可以按顺序设置如下属性：
font-style;font-weight;font-size;font-family
所以font:italic bold 25px cursive,"微软雅黑"等同于font-sizee=25px;
font-family:cursive,"微软雅黑";font-style:italic;font-weight:bold;
Font-family的值可以设置多个，它会查找系统有哪些，然后从前到后按照第一个系统有的输出，英文的字体则用英文的字体格式，中文则用中文格式。若网页内容中同时有中文和英文，则英文的字体格式放在中文字体格式前面
span和p不一样：
span不会独占一行，p会独占一行
例如：
<p>这是一首<p id="id1">思恋</p>家乡的诗歌</p>
<p>这是一首<span id="id1">思恋</span>家乡的诗歌</p>
这两者的的区别，第一个呈现两行，而第二个会呈现一行
行内元素：不会独占一行，如:span很常用
块级元素：会独占一行，如:p、还有很常用的块级元素<div>
区别:(1)行内元素不会独占一行，而块级元素会独占一行
(2)块级元素可以设置宽高，但行级(行内)元素设置宽高不起作用
div标签一般会应用在：
网页布局
排版网页内容
格式：<div></div>
div标签常用属性：weight，height，border
文本样式
属性 含义 示例
color 设置文本颜色 color:#00C;
text-align 设置元素水平对齐方式 text-align:right;
text-indent 设置首行文本的缩进 text-indent:20px;
text-indent:2em; 移动2个汉字，空两格
line-height 设置文本的行高(行间距) line-height:25px;
text-decoration 设置文本的装饰 text-decoration:underline; 下划线
text-decoration:line-through; 打折线
text-indent:2em; 移动2个汉字，em应用在汉字，1em代表1个汉字的高度，汉字是方块字
Line-height一般结合div标签使用
CSS设置超链接
伪类语法
标签名:伪类名{声明;}
例：
a:hover{
color:red;
text-decoration:underline;
}
这句代表：鼠标移到超链接上面时，链接显示转变为红色，并且有下划线
伪类
伪类名称 含义
a:link 未单击访问时超链接样式
a:visited 单击访问后超链接样式
a:hover 鼠标悬浮其上的超链接样式
a:active 鼠标单击未释放的超链接样式
css设置超链接的顺序：a:link、a:visited、a:hover、a:active,如果不按这顺序，可能样式起不来
怎么记忆：先爱后恨 love hate
常见的开发中的使用：超链接未被访问、鼠标悬浮到超链接上面
a:link{ 等同于 a{
设置的样式 设置的样式
} }
CSS设置鼠标形状 属性: cursor:属性值 cursor鼠标
在标签中使用内联样式是要加style属性。如:<p style=”cursor:pointer”></p>
背景属性
背景颜色:background-color:#B70447;
背景图像
-图像路径:background-image:url(img/buy.png);
-重复方式:background-repeat:no-repeat;
-背景定位:background-position:10px 15px;
例子：
background-color:transparent; 透明色
background-repeat:repeat-x 以x轴横向平铺
background-position:top left 默认值为左上
值可以取关键字也可以是像素值，关键字和像素值可以混合使用
像素值:px
关键词:
水平方向:left、center、right
垂直方向:top、center、bottom
background-position:10px 15px; 指的是相对于左上角背景图像的偏移量，向右偏移10像素，向左偏移15像素。（先往横向的偏移再往竖向的偏移）
注意：要查看是先往哪偏移可以先固定一个值，再改变另一个值，再通过浏览器看效果
注意事项：
当同时设置背景图片和背景颜色时，背景图像是高于背景颜色的（即显示的是背景图像）
列表 一般会应用在商品分类等
有序列表 <ol> /*order list*/
<li></li>
</ol>
无序列表 <ul> /*unorder list*/
<li></li>
</ul>
自定义列表 <dl> /*definition list*/
<dt></dt> /* definition title自定义标题*/
<dd></dd> /* definition description
自定义内容描述*/
</dl>
例：可以查看京东商城全部商品分类某一项的，查看元素
<dl>
<dt>这个是自定义内容标题</dt>
<dd>这个是自定义内容描述</dd>
</dl>
<dl>
<dt>所属学院</dt>
<dd>计算机应用</dd>
<dt>所属专业</dt>
<dd>计算机软件工程</dd>
</dl>
希望把列表真正的变为网页中的效果需要加上样式
列表样式
list-style-type 列表项的类型
list-style-image 列表项的图标
list-style-position 列表项的位置
list-style
要记住:list-style-type、list-style
list-style-image:url(“image/1.jpg”)
inside相当于在列表项的里面
outside相当于在列表项的外面
样式：
li{
border:1px solid red;
}
ul{
list-style-position:inside;
}
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
制作京东首页左侧菜单
使用列表、背景样式制作菜单
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>仿京东左侧菜单</title>
<style>
*{padding:0;margin:0;} /*所有元素都可以使用这个样式，去除网页中所有元素的默认样式，例如h1标签使用，加上这个样式会顶上去*/
a{text-decoration:none;color:#fff;}
.nav-box{width:210px;}
.nav-top{
height:45px;
font-size:16px;
line-height:45px; /*想让一个元素里面的文字居中可以让元素的hegiht和line-height取值一样*/
padding:0 10px;
background:#B1191A;
color:#fff;
}
ul{
List-style-type:none;
Background:#c81623;
}
Li{
Border:yellow;
Height:30px;
Line-height:30px;
Font-size:14px;
Padding-left:8px; 内容左边距离边框填充8px的空白
Color：#fff；
Background:url(“jiantou.jpg”) no-repeat 195px center;
}
</style>
</head>
<body>
<div class="nav-box">
<div class="nav-top">全部商品分类</div>
<ul>
<li><a href="">家用电器</a></li>
<li><a href="">手机</a>、<a href="">数码</a>、<a
href="">京东通信</a></li>
<li><a href="">电脑</a>、<a href="">办公</a></li>
<li><a href="">家居</a>、<a href="">家具</a>、<a
href="">家装</a>、<a href="">厨具</a></li>
<li><a href="">男装</a>、<a href="">女装</a>、<a
href="">珠宝</a></li>
<li><a href="">个护化妆</a></li>
<li><a href="">鞋靴</a>、<a href="">箱包</a>、<a
href="">钟表</a>、<a href="">奢侈品</a></li>
<li><a href="">运动户外</a></li>
</ul>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 为a标签设置行宽高无效？
- CSS基础
- css继承样式怎么控制?用选择器
- DIV+CSS布局
- 为SeekBar滑块设置固定值以及自定义Seekbar，progressbar样式
- CSS高级技巧
- 十步图解CSS的position
- HTML CSS特殊字符总结
- JS+CSS 实现轮播图 （一）
- 单纯使用CSS实现下拉菜单
- Html-样式（css）基础记录
- CSS —— z-index与background重叠研究
- CSS box-shadow
- css中的伪类与伪元素的区别
- CSS —— html布局选择与注意事项
- QGraphicsPixmapItem与QGraphicsScene的编程实例 图标拖动渐变效果
- CSS设置英文字母大小写
- 伪元素::selection -- CSS ::selection 伪元素，定义用户鼠标已选择内容的样式
- CSS设置文字斜体
- CSS设置文字的划线