专栏首页张俊红网页的修饰

网页的修饰

总第61篇

上一篇推送了网页的基本构成,链接地址:网页是怎么构成的?,这篇来讲讲网页的修饰,正如字面意思一般,本篇分享的内容是用来修饰网页的,是让网页变得更加好看。本文只是介绍一些基本的CSS,适合入门。

01|什么是CSS:

CSS 指层叠样式表 (Cascading Style Sheets)

样式是用来定义如何显示 HTML 元素

02|CSS怎么用:

CSS怎么用,也就是CSS的语法。CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。

选择器通常是您需要改变样式的 HTML 元素。 每条声明由一个属性和一个值组成。 属性(property)是希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开,声明组以大括号({})括起来。

为了让CSS可读性更强,你可以每行只描述一个属性:

p
{color:red;
text-align:center;
}

CSS注释以 “/*“ 开始, 以 “*/“ 结束, 比如: /这是个注释/

03|CSS属性:

1、背景属性,即用来设置背景的。

背景颜色设定

<style>
body
{
    background-color:yellow;
}
h1
{
    background-color:#00ff00;
}
p
{
    background-color:rgb(255,0,255);
}
</style>

背景图片设定

<style>
body 
{
    background-image:url('paper.gif');
    background-color:#cccccc;
}
</style>

2、尺寸属性,用来设置元素的高度和宽度。

<style>
img.normal
{
    height:auto;
}
img.big
{
    height:120px;
}
p.ex
{
    height:100px;
    width:100px;
}
</style>
</head>

<body>
<img class="normal" src="logocss.gif" width="95" height="84" /><br>
<img class="big" src="logocss.gif" width="95" height="84" />
<p class="ex">这个段落的高和宽是 100px.</p>

3、字体属性,用来设置元素的字体显示方式。

字体样式(font-style)

<style>
p.normal {font-style:normal;}/*浏览器正常字体*/
p.italic {font-style:italic;}/*斜体*/
</style>
</head>

<body>
<p class="normal">这是一个段落,正常。</p>
<p class="italic">这是一个段落,斜体。</p>
</body>

字体宽度(font-weight)

<style>
p.normal {font-weight:normal;}/*正常的字体*/
p.light {font-weight:lighter;}/*稍微细一点的字体*/
p.thick {font-weight:bold;}/*粗细一点的字体*/
p.thicker {font-weight:900;}/*也可以通过传送具体的数值来设置*/
</style>

字体大小(font-size)

<style>
h1 {font-size:250%;}
h2 {font-size:200%;}
p {font-size:100%;}
</style>

4、文本属性

文本颜色设置(color),即字体颜色

<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}/*p.ex表示元素p的属性ex,在元素p中可以直接调用*/
</style>
<body>

<h1>这是标题 1</h1>
<p>这是一个普通的段落。请注意,本文是红色的。页面中定义默认的文本颜色选择器。</p>
<p class="ex">这是一个类为"ex"的段落。这个文本是蓝色的。</p>
</body>

文本的方向设置(direction)

<style>
div.ex1 {direction:rtl;}
</style>
</head>
<body>

<div>一些文本。默认的书写方向。</div>
<div class="ex1">一些文本。 Right-to-left 方向。</div>

</body>

ltr 为默认属性,文本方向从左到右;rtl 文本方向从右到左。

文本对齐属性(text-align)

<style>
h1 {text-align:center}/*居中对齐*/
h2 {text-align:left}/*左对齐*/
h3 {text-align:right}/*右对齐*/
h4 {text-align:justify}/*分散对齐*/
</style>

文本字符间距(letter-spacing)

<style>
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>

字符间距值默认情况为0,即字符之间没有间隔。也可以为负值,出现重叠的效果。

本文分享自微信公众号 - 张俊红(zhangjunhong0428)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-04-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 试试这4个CSS动画解决方案和资源

    随着移动设备的大量使用和CSS3兼容性在浏览器中的普及,越来越多的程序猿开始设计和使用基于CSS3的动画效果解决方案,但是自己编写基于CSS3的动画效果也是一件...

    前朝楚水
  • 谷歌调试工具选取元素选择不到页面的具体元素问题

    z-index的问题 document的默认值是0. 一旦出现这种问题,检查下是否对大背景设置了z-index:-1; 如果设置了这个,那么所有的被设元素的内容...

    smy
  • css sprite 调整大张图片中小图标的大小

    直接说解决方法: ? 假设一张拼合好的大图大小是:900 x 1000 px (如上图) 现在想取图中左上角的河马图标,并缩小图标的大小。 正常取图: .spr...

    smy
  • 多行图片hover加边框兼容IE7+

    问题: 遇到多行多列排列的图片时,hover上去加边框会把下面的图片挤到别处 =========================================...

    smy
  • CSS伪元素的妙用--单标签之美

    本文主要讲述一下 伪元素 before 和 after 各种妙用。 :before和::before的区别 在介绍具体用法之前,简单介绍下伪类和伪元素。伪类...

    前朝楚水
  • 30+有用的CSS代码片段

    在一篇文章中收集所有的CSS代码片段几乎是不可能的事情,但是我们这里列出了一些相对于其他的更有用的代码片段,不要被这些代码的长度所吓到,因为它们都很容易实现,并...

    前朝楚水
  • 开发者调试工具Chrome Workspace

    Workspace是个什么样的东西呢?他能够在开发者工具中调试修改js或者css同时自动保存文件,能够避免开发人员在工具中调试好,再到编辑器中修改一次代码的重...

    smy
  • css控制标题长度超出部分显示省略号

    width: 50px; overflow:hidden;white-space:nowrap; text-overflow:ellipsis; 设置或...

    smy
  • webapp设置适应pc和手机的页面宽高以及布局层叠图片文字

    <!DOCTYPE html> <html lang="zh-cn"> <head> <title>我趣旅行网-美剧迷</title> <meta c...

    smy
  • CSS选择器是如何确定优先级的?

    先看下面的示例 <div id="content"> <p id="title">Hello world</p> </div> 有如下的2个css选择器...

    dys

扫码关注云+社区

领取腾讯云代金券