字体样式
属性 含义 示例
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>