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

最新推荐文章于 2021-06-24 13:25:16 发布

爱听民谣的王川

最新推荐文章于 2021-06-24 13:25:16 发布

阅读量341

点赞数

分类专栏：牛腩新闻发布系统文章标签： css

本文链接：https://blog.csdn.net/u010282984/article/details/59108771

版权

牛腩新闻发布系统专栏收录该内容

11 篇文章 0 订阅

订阅专栏

*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;
}

爱听民谣的王川

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
8
评论
牛腩(7)-关于 CSS 的部分内容

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

扫一扫