牛腩新闻发布系统：CSS-基本概念

最新推荐文章于 2022-03-29 13:48:31 发布

Marshall Ren

最新推荐文章于 2022-03-29 13:48:31 发布

阅读量203

点赞数

分类专栏： ASP.NET

本文链接：https://blog.csdn.net/Marshallren/article/details/91448927

版权

ASP.NET 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

基本概念：

CSS（层叠样式表）：是一种用来表现HTML或XML等文件样式的计算机语言。

HTML：标准通用标记语言的应用；

块级元素：<div></div>；

行内元素：<span</span>；

我们顺便回顾一下之前在C#视频学习中，小杨老师简单提到的有关HTML的一些基本概念：

Html：hyper Text Markup Language 超文本标签语言

HTML：网页的源码

浏览器：解释和执行HTML源码的工具

浏览器的页面包括：格式标签与页面内容

网页文件格式：html或htm

一个基本的html页面所应该有的元素：

<html></html>，html基本标签

<head></head>，写在html标签里，表示网页格式标签

<title></title>，写在hand标签里，表示网页页面内容

<html>
<head>
    <meta charset="utf-8" />
    <title>CSS测试</title>
</head>
<body>
    宁来辣
</body>
</html>

CSS的使用：

我们在项目中新建项“样式表”，即为CSS的建立，而我们在其中写下代码即可以对HTML页的代码进行影响。

若想使样式表真正发挥其作用，还需要让HTML与样式表有关联。

关联方法：将使用的样式表拖动到HTML代码区的<head></head>中

P.S：为了方便讲解，下面的使用都用例子进行讲解。

1.ID选择器：

在样式表中的代码：

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

在HTML中使用：（在<body>内输入代码）

    <span id="special">栏目一</span>

2.类选择器：

在样式表中的代码：

.dropdown-menu {
    color: #00f;                  /*字体蓝色*/
    background-color: #eeeeee;    /*背景颜色浅灰色*/
    border:1px solid #0ff;        /*边框样式设定*/
    padding-top:3px;              /*字体与框上边界间距5个像素的距离*/
    padding-left:10px;
    padding-bottom:20px;
    margin:5px;                   /*框与上边界间距5个像素的距离*/
    width:150px;                  /*框的宽度*/
    height:60px;                  /*框的高度*/
    line-height:60px;             /*文本垂直居中*/
}

在HTML中使用：（在<body>内输入代码）

    <span class="dropdown-menu">栏目二</span>

3.HTML标签选择器：（样式表建立时就会有）

body {
    color: #ff0;    /*字体黄色*/
}

在HTML中使用：（不需要输入<span>或<div>，直接在<body>内输入代码即可）

    45jklakhf234

结果：

4.块级元素：<div></div>

样式表中的代码和2中相同

在HTML中使用：

    <div class="dropdown-menu">栏目四</div>
    <div class="dropdown-menu">栏目五</div>

结果：

5.行内元素：<span></span>

样式表中的代码和2中相同

在HTML中使用：

    <span class="dropdown-menu">栏目四</span>
    <span class="dropdown-menu">栏目五</span>

结果：

*注意：在例子2、5中，我们可以看到在行内元素代码内，有些属性的设定是无效（margin、width、height、padding）

CSS的优点：将网页的样式与内容相分离。

Marshall Ren

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
牛腩新闻发布系统：CSS-基本概念

基本概念：CSS（层叠样式表）：是一种用来表现HTML或XML等文件样式的计算机语言。HTML：标准通用标记语言的应用；块级元素：<div></div>；行内元素：<span</span>；我们顺便回顾一下之前在C#视频学习中，小杨老师简单提到的有关HTML的一些基本概念：Html：hyper Text Markup Lang...
复制链接

扫一扫