CSS样式表

最新推荐文章于 2021-10-10 19:15:00 发布

weixin_39701250

最新推荐文章于 2021-10-10 19:15:00 发布

阅读量215

点赞数

分类专栏： ASP.NET

本文链接：https://blog.csdn.net/weixin_39701250/article/details/86491598

版权

ASP.NET 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

body {
    font-size:10pt;
    font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;
    color:black;
    line-height:14pt;
    padding-left:5pt;
    padding-right:5pt;
    padding-top:5pt;  
}
h1{
    font:14pt Verdana,Geneva,Arial,Helvetica,sans-serif;
    font-weight:bold;
    line-height:20pt;
}

p.subheader{
    font-weight:bold;
    color:#593d87;
}

img{
    padding:3pt;
    float:right;
}

a{
    text-decoration:dashed;
}

a:link,a:visited{
    color:#8094d6;
}

a:hover,a:active{
    color:#FF9933;
}

footer{
    font-size:9pt;
    font-style:italic;
    line-height:12pt;
    text-align:center;
    padding-top:30pt;
}

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>About BAWSI</title>
	<meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="StyleSheet.css"/>
</head>
<body>
    <section>
        <header><h1>About BAWSI</h1></header>
        <p><img src="top.jpg" alt="BAWSI logo"/>fafdsfsdfasssssssssddddddddddddddddddddddddddddfsdfasfsdfsdfsadf
        sdfsdfsadfsdfsdfsdfsdfsdfsfsdfsfsdfsdfsdfsafsdfsdfsfsdfsfsdfsfsd</p>

        <p class="subheader">BAWSI's History</p>

        <p>fsdfsfsdfsfsfsdfsdfaaaaaddddddddddddd
        ddddddddddddddddddddddddddddddddddddddd.....</p>
        <p><a href="secondpage.html">[continue reading]</a></p>
    </section>

    <footer>
        Copyright %copy; 2005-2019 BAWSI(www.bawsi.org).
        All rights reserved. Used with permission.
    </footer>
</body>
</html>

CSS可以轻松地创建具有多个页面的站点，并且维持一致的外观和感觉。
只需要修改一次CSS样式表就能使所有页面都改变。

CSS包括几种样式属性，它们用于控制字体、颜色、对齐方式、边距，等等。CSS的样式属性可以分为两大类：

布局属性，由影响Web页面上的元素定位的属性组成，如边距、填充和对齐方式。
格式化属性，由影响Web站点内的元素的视觉显示的属性组成，如字体类型、大小和颜色。

基本的布局属性：
CSS布局属性确定了在Web页面上如何放置内容。最重要的布局属性之一是display属性，它描述了如何相对于其他元素显示一个元素。
display属性有4个基本值：

block：在新行上显示元素，比如在一个新段落中。
list-item：在新行上显示元素，并在其旁边带有一个列表项标记，如项目符号。
inline：利用当前段落内联显示元素。
none：不显示元素，它是隐藏的。

display属性依赖于相对定位（relative positioning）的概念，它意味着元素相对于页面上的其他元素进行定位。CSS还指出绝对定位（absolute positioning），它允许独立于其他元素把一个元素放在页面上的指定位置。

如果形象地表示出每个元素在显示时在Web页面上所占据的矩形区域——display属性可以控制这个矩形区域的显示方式，将更容易理解display属性。例如：block值将导致元素独立放在一个新行上，而inline值则把元素放在它前面的内容旁边。display属性是可以在大多数样式规则中应用的少数几个样式属性之一。如何设置display属性示例：
display：block；

可以利用width和height属性控制用于元素的矩形区域的大小。和许多与大小相关CSS属性一样，可以用多种不同的度量单位指定width和height属性值。

in——英寸
cm——厘米
mm——毫米
%——百分比
px——像素
pt——磅
无论在样式表内怎样的选择，都可以混用和匹配单位，但是在一组类似的样式属性中保持一致是一个好主意。例如，你可能想坚持为字体属性使用磅，并为尺寸使用像素。
width：200px；

基本的格式化属性：
CSS格式化属性控制Web页面上的内容的外观，与控制内容的物理定位相对。最流行的格式化属性之一是border属性，它利用一个方框或者部分方框在元素周围建立一条可见的边界。
border的描述方式：

border-width：边框边缘宽度
border-color：边框边缘的颜色
border-style：边框边缘的样式
border-left，right，top，bottom：边框的左边，右边，上边，下边
border：边框的各条边

border-style属性：

solid：单线边框（常用边框属性）
double：双线边框
dashed：短划虚线边框
dotted：点线边框
groove：具有沟槽外观的边框
ridge：具有脊状外观的边框
inset：具有内嵌外观的边框
outset：具有外凸外观的边框
none：无边框
hidden：实际上等同于none。（默认属性）

border-left，right，top，bottom：允许单独为每一边设置边框。如果想让4条边显示相同的样式，使用border属性。它期望以下面的样式通过空格隔开设置：border-width、border-style、border-color。例如：
border：10px double red；

文本颜色用color属性，背景颜色用background-color属性。

文本对齐方式text-align，缩进用text-indent；

设置字体：

font-family：字体系列
font-size：字体大小
font-style：字体样式（normal或italic）
font-weight：字体的粗细（normal、lighter、bold、bolder等）

line-height：行距
text-decoration：用于关闭链接的下划线，可以简单滴设置为none。
padding：给元素的左，上，右，下添加填充，可以用度量单位或者页面宽度的百分比单位。

使用样式类：
定义的每一类特殊格式化的文本被称为样式类（style class）。样式类是一组自定义的格式化规范，可以应用于web页面中的任何元素。
可以使用选择器把样式属性和它们各自的值与web页面上的元素关联起来，选择器用于标识应用样式的页面上的标签。下面给出了选择器、属性、值的示例：
h1{ font：36pt Courier；}
选择器很重要，因为它意味着字体设置将应用于Web页面中的所有h1元素。
假设想在文档中使用两种不同的h1标题，就可以为每种标题设置样式类：
h1.silly{ font : 37pt Comic Sans;}
h1.serious{ font : 36pt Arial;}
使用样式类：

<h1 class="silly">silly</h1>
<h1 class="serious">serious</h1>
<h1>normal</h1>

样式表编写规则：
p.subheader { font-weight : bopld; } 一行写
p.subheader {
font-weight : bopld;
color : #593d87; } 多行写简洁

样式ID：
自定义样式类可以重复利用很多次。
样式ID是一种自定义的格式化规范，只能应用于Web页面上的一个元素。可以跨一组页面使用ID，但是在每个页面内每个时间只能使用一次。
假设每个页面都有一个页面标题，但是所有页面本身都包括该页面标题的一个实例。下面给出一个选择器示例，它具有一个指定的ID，以及一个属性和一个值：
p#title { font: 24pt Verdana, Geneva, Arial, sans-serif }
注意这个p后跟一个#，其后接着一个描述性ID。在HTML代码中使用样式ID只需要在元素的id属性指定ID名称即可：

<p id="title">Some Title</p>

内部样式表：
在一个Web页面中使用样式，可以把样式表封装在 style 和 /style 标签之间，并且写在 head 中，无需 /link 标签，这类样式表称为内部样式表。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <style type="text/css">
        footer{
            font-size:20pt;
            line-height:120pt;
            text-align:center;
        }
    </style>
</head>
<body>
    <p>fdafsdfsdafsadfsdfasdfaaaaaaaaaaaaa
    fasfsdadfasfsdfsdfsdfsdfsfsafsafsfsa</p>
    <footer>
        Copyright 2018 China Products,Inc.
    </footer>
</body>
</html>

内联样式：
可以通过 style 属性在 p、div 、span 标签内创建并应用样式规则。
div和span区别：div会强制换行，span不执行任何换行操作。

<p style="color : red">
	This is red, but <span style="color : green"> this text is green. </span>
	Back to Green.
</p>

验证样式表：
在 http://jigsaw.w3.org/css-validator/ 上可以找到用于CSS的特定验证工具。可以把该工具指定一个Web地址，上传文件，或者把内容粘贴进所提供的表单字段中。

可以把多个样式表连接到单个页面上，例如一个样式表是格式化（文本、字体、颜色）的样式表和另一个用于布局（间距、填充、对齐）的样式表，对这两个样式表都只包括一个 /link 。从技术上说，CSS标准要求Web浏览器给用户提供一个选项，以便当通过多个 link/ 标签提供多个样式表时可以在他们之间做出选择。不过在实际中，所有主流的Web浏览器都只简单地包括每个样式表，除非它具有rel=“alternate”属性。用于链接多个样式表的首选技术是使用 @import 命令。下面显示了使用 @import 导入多个样式表：

@import url（style1.css）；
@import url（style2.css）；

与 link/ 标签类似，@import 命令必须放在Web页面的head内。

weixin_39701250

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS样式表

body { font-size:10pt; font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; color:black; line-height:14pt; padding-left:5pt; padding-right:5pt; padding-top:5pt; }h1{ ...
复制链接

扫一扫