您的位置：首页 > Web前端 > CSS

牛腩(7)-关于 CSS 的部分内容

2017-03-12 10:03 246 查看

*CSS特点：实现网页内容与样式的分离

*CSS选择器优先级：ID选择器（#special） > 类选择器(menu/title) > HTML标签选择器(body)

*CSS核心内容：标准流、合资模型、浮动、定位

*块级元素、行内元素

Html 内容端 1

<!DOCTYPE html>

<!--
创建人：王川
-->

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>CSS测试</title>
<link href="CSS/StyleSheet.css" rel="stylesheet" />
</head>
<body>
<div class ="menu">栏目一</div>
<div class ="menu ttt">栏目二</div>
<div class ="menu ">栏目三</div>
<div class ="title">wangchuan6688</div>
</body>
</html>

Html 内容端 2

<!DOCTYPE html>

<!--
创建人：王川
-->

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>CSS测试</title>
<link href="CSS/StyleSheet.css" rel="stylesheet" />
</head>
<body>
<span id="special"class ="menu">栏目四</span>
<span class ="niu menu">栏目五</span>
<span class ="menu">栏目六</span>
<span class ="title">这是<span>一</span>条新闻标题</span>
</body>
</html>

Html 样式端

/*
*创建人：王川
*CSS特点：实现网页内容与样式的分离
*CSS选择器优先级：ID选择器（#special） > 类选择器(menu/title) >  HTML标签选择器(body)
*CSS核心内容：标准流、合资模型、浮动、定位
*块级元素、行内元素
*/

body {
color :#f0f;
}

.menu {/*栏目样式*/
color :#f00;    /*文字颜色*/
}

.title {/*新闻标题样式*/
color :#00f;    /*文字颜色*/
clear :left ;  /*清除浮动*/
}

#special {
font-weight :bold ;/*粗体*/
color :#0f0;
}

.title span {
color :#000;
font-size :12px;/*字体大小*/
}

.menu, .title {
/*background-color :#ee00ff;*/
}

.niu {
text-decoration :underline ;
color :#eeeeee;
}

.menu { /*栏目样式*/
color :#f00;    /*文字颜色*/
background-color :#FFE7F7;
border :1px solid #00f;
padding :5px;
margin :5px;
width:150px;
height : 60px;
line-height :60px;    /*让文本垂直居中*/
float :right;    /*盒子向左浮动*/
}

.ttt {
/*position :relative ;  相对定位*/
/*position:absolute ;绝对定位
top :80px;*/
}

#aaa {
border :1px solid #000;
padding :5px;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css

相关文章推荐

新的分享

章节导航