Web前端开发学习之路——初识CSS的基本功能（二）

最新推荐文章于 2022-09-28 13:51:00 发布

宇直豪

最新推荐文章于 2022-09-28 13:51:00 发布

阅读量321

点赞数

分类专栏：前端开发文章标签：前端开发

本文链接：https://blog.csdn.net/CSDN_XUWENHAO/article/details/88566401

版权

前端开发专栏收录该内容

15 篇文章 1 订阅

订阅专栏

CSS基本语法

控制文字样式

**常用的字体属性**
属性	属性名称	设置值
color	字体颜色	颜色名称十六进制 RGB码
font-family	字体样式	字型名称
font-size	文字大小	数值+百分比（%）数值+单位（pt,px,em,ex）
font-style	文字斜体	nomal(普通) italic（斜体） oblique（斜体）
font-weight	文字粗体	normal(普通) bold（粗体） bolder（超粗体） lighter（细体）

color使用格式如下：

<style type="text/css">
    h1{color:red;}
</style>

font-family使用格式如下：

<style type="text/css">
    h1{font-family:"Arail Black","楷体";}
</style>

font-size使用格式如下：

<style type="text/css">
    h1{font-size:20pt}
</style>

#font-size常用单位有cm、mm、pt、px、em和%，默认值为12pt

font-style使用格式如下：

<style type ="text/css">
    h1{font-style:italic;}
</style>

font-weight使用格式如下：

<style type="text/css">
    h1{font-weight:bold;}
</style>

段落属性

**常用的段落属性**
属性	属性名称	设置值
text-align	文字水平对齐	left center right justify
text-indent	首行缩进	数值+百分比（%）数值+单位
letter-spacing	字符间距	normal 数值+单位（pt,px,em）
line-height	行高	数值+单位
word-wrap	是否换行	break-word

text-align使用格式如下：

<style type="text/css">
    h1{text-align:center;} #居中
</style>

#text-align:left; 靠左
#text-align:right;靠右
#text-align:justify;文字靠左右两端平均分配

text-indent设置首行缩进距离使用格式如下：

<style type="text/css">
    h1{text-indent:15px;}
</style>

letter-spacing使用格式如下：

<style type="text"/css>
    h1{letter-spacing:5px;}
</style>

line-height设置行高使用格式如下：

<style type="text/css">
    h1{line-height:140%;}
</style>

文字效果属性

**文字效果属性**
属性	属性名称	设置值
vertical-align	垂直对齐	baseline（一般位置） super（上标） sub（下标） top（顶端对齐） middel（垂直居中） bottom（底端对齐）
text-decoration	文字装饰样式	none underline（下划线） line-through（删除线） overline（上划线）
text-transform	转换字母大小写	none lowercase uppercase capitalize
text-shadow （IE不支持）	增加阴影效果

vertical-align设置属性垂直对齐的方式如下：

<style type="text/css">
    h1{vertical-align:middle;}
</style>

实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vertical-align</title>
    <style type="text/css">
    <!--
        body{
            font-family: Arial;
            font-size: 30px;
        }
        .txt_super{
            vertical-align: super;
            font-size: 0.5em;
        }
        .txt_sub{
            vertical-align: sub;
            font-size: 0.5em;
        }
    -->
    </style>
</head>
<body>
a<font class="txt_super">2</font>+b<font class="txt_super">2</font> =c<font class="txt_super">2</font><p>
    CO<font class="txt_sub">2</font> H<font class="txt_sub">2</font>O
</body>
</html>

执行结果：

text-decoration增加装饰样式格式如下：

<style type="text/css">
    h1{text-decoration:underline;}
</style>

text-transform设置大小写转换的方式格式如下：

<style type="text/css">
    h1{ text-transform:capitalize;}
</style>

text-shadow设置阴影样式如下：

text-shadow:h-shadow v-shadow blur color;
#h-shadow:水平方向阴影大小(horizontal)
#v-shadow:垂直方向阴影大小(vertical)
#blur:模糊淡化程度(不屑表示不使用模糊效果)
#color:阴影的颜色
#写法如下：
text-shadow：10px 10px 10 px #ff0000;

控制背景

设置背景颜色语法如下：

<style type="text/css">
    td{background-color:#FFFF66;}
</style>

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background-color</title>
    <style type="text/css">
        <!--
        body{
            font-family: Arial;
            font-size: 30px;
            background-color: #FFFFCC;
        }
        td{
            background-color: rgb(255,255,0);
        }
        -->
    </style>
</head>
<body>
<table align="center">
    <tr>
        <td><b>浪淘沙</b><p>
            九曲黄河万里沙，浪淘风簸自天涯。<br>
如今直上银河去，同到牵牛织女家。<br>

        </td>
    </tr>
</table>
</body>
</html>

执行结果如下，设置网页背景以及单元格内背景：

设置背景图片

**设置背景图片的属性**
属性	属性名称	设置值
background-image	背景图片	url(图片文件相对路径)
background-repeat	是否重复显示背景图片	repeat repeat-x repeat-y no-repeat
background-attachment	背景图片是否随网页滚动条滚动	fixed（固定） scroll（随滚动条滚动）
background-position	背景图片位置	x%y% x y [top,center,bottom][left,center,right]
background	综合运用
background-size	设置背景尺寸	length(长宽) percentage(百分比) cover(缩放到最小边符合组件) contain(缩放)
background-origin	设置背景远点	padding-box border-box content-box

background-image设置图片格式如下：

<style type="text/css">
    body{background-image:url(images/a.jpg)}  #图片文件相对路径
<style>

bckaground-image属性值可以使用的图片格式有JPG、GIF和PNG3种。

CSS3支持多重背景图，语法也很简单，只需用“，”将两个url路径隔开就可以了，语法如下：

background-image:url(a.jpg),url(b.jpg);

background-repeat设置背景图片是否重复显示格式如下：

<style type="text/css">
    body {background-repeat:no-repeat}
</style>

repeat:重复并排显示，这是默认值
repeat-x:水平方向重复显示
repeat-y:垂直方向重复显示
no-repeat:不重复显示

background-attachment设置背景图片是否与滚动条一起滚动格式如下：

<style type ="text/css">
    body {background-attachment:fixed}
</style>

background-position设置背景图片位置格式如下：

<style type="text/css">
    body{background-position:20px 50px}
</style>

下面是实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background-position</title>
    <style type="text/css">
        td{
            background-image: url("images/dot.gif");/*网页背景图*/
            background-repeat: no-repeat; /*背景图片不重复*/
            vertical-align: bottom;/*文字靠下对齐*/
            text-align: center;/*文字水平居中*/
        }
    </style>
</head>
<body>
<table border="2" align="center">
    <tr>
        <td width="100" height="100" style="background-position: left top;">left top</td>
        <td width="100" height="100" style="background-position: center top;">center top</td>
        <td width="100" height="100" style="background-position: right top;">right top</td>
    </tr>
    <tr>
        <td width="100" height="100" style="background-position: center left;">center left</td>
        <td width="100" height="100" style="background-position: center center;">center center</td>
        <td width="100" height="100" style="background-position: center right;">center right</td>
    </tr>
     <tr>
        <td width="100" height="100" style="background-position: left bottom;">left bottom</td>
        <td width="100" height="100" style="background-position: center bottom;">center bottom</td>
        <td width="100" height="100" style="background-position: right bottom;">right bottom</td>
    </tr>
</table>
</body>
</html>

下面是执行结果：

background综合设置背景图片格式如下：

<style type="text/css">
    body{background:url(images/dot.gif) repeat-x fixed 100% 100%;}
</style>

#设置背景尺寸
background-size:"60px 80px"

设置背景渐变可以使用linear-gradient（线性渐变）和radial-gradient（圆形渐变）

本篇学习了CSS3的基本语法，在下一篇文章种会介绍CSS3的排版样式以及一些炫酷的例子...

宇直豪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端开发学习之路——初识CSS的基本功能（二）

CSS基本语法控制文字样式常用的字体属性属性属性名称设置值 color 字体颜色颜色名称十六进制 RGB码 font-family 字体样式字型名称 font-size 文字大小数值+百分比（%）数值+单位（pt,px,em,ex） font-style...
复制链接

扫一扫