CSS基础（二）个人笔记

来源：互联网发布：文华财经mac版编辑：程序博客网时间：2024/05/16 10:17

文本

1.文本样式

1.text-align:justify; 文本对齐方式。
2.text-indent:2em;首行缩进两个字符。
3.font-weight:bold;字体加粗。
4.font-style:italic; 字体倾斜。
5.text-decoration: 横线。
6.line-height: 行高。
7.letter-spacing:属性增加或减少字符间的空白。
示例如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <style>        p{            text-align: justify;/*justify:两端对齐（常用）*/            text-indent: 2em; /*文本首行缩进两个字符*/            color: red;            font-size: 20px;/*字体大小*/            font-weight: bold;/*加粗*/            font-style: italic;/*倾斜*/            text-decoration: underline;/*划线*/            line-height: 60px;/*行高*/            letter-spacing: 5px;        }    </style>    <title>文本样式</title></head><body><p>新华社北京7月29日电（记者刘开雄）近日，针对国务院第四次大督查实地督查发现个别地方仍有企业顶风违规生产“地条钢”问题，中共中央政治局常委、国务院总理李克强作出重要批示强调，督查工作就是要盯住重点问题持续不懈抓。取缔“地条钢”、化解过剩产能要坚定不移推进，防止死灰复燃。对顶风作案的要坚决依法严惩，对监管不力的要严肃问责，务必做到令行禁止。</p></body></html>

结果：
这里写图片描述

（小应用：文本的垂直居中）

通过text-align和line-height相结合实现
事例如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <style>        div{            height: 100px;            background-color: red;            text-align: center;            line-height: 100px;        }    </style>    <!--通过text-align和line-height相结合使用-->    <title>文本的垂直居中</title></head><body>    <div>杰</div></body></html>

结果如下：
这里写图片描述

2.文本阴影

1.text-shadow: 10px 10px 10px blue;/*x的偏移 y的偏移模糊距离颜色
2. -webkit-text-stroke: 1px black;/*描边（只支持谷歌浏览器；）
示例如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <style>        p{            color: red;            font-size: 50px;            text-shadow: 10px 10px 10px blue;/*x的偏移 y的偏移 模糊距离 颜色*/            -webkit-text-stroke: 1px black;/*描边（只支持谷歌浏览器，；）*/        }    </style>    <title>文本阴影</title></head><body><p>杰瑞教育</p></body></html>

结果：
这里写图片描述

3.背景

1.background-color: 背景颜色。
2.background-ia=mage:url(“”);背景图片。
3.background-size:图片比例缩放。
4.background-repeat:图片填充格式。
5.background-position:图片位置。
6.background-origin:图片显示。
7.background-clip:裁剪方式。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <style>        #imgContainer{            border: 20px dashed yellow;            padding: 50px;            height: 400px;            background-color: red;/*背景颜色*/            background-image: url("../img/15438-106.jpg");/*背景图片*/            background-repeat:no-repeat;/*图片填充方式*/           /*背景图片大小           cover（覆盖）:图片会等比例进行缩放，直至最小部分填满容器，           有可能出现图片显示不全的效果           contain（包含）：图片也是等比例缩放，直到最大部分填满容器，           有可能出现图片覆盖不全的效果*/            background-size: 30% 30%;            background-position: -20px -20px;            /*background-origin 背景图片起点             border-box 从外边框开始显示             padding-box 从内边距开始             content-box 从内容处开始*/            background-origin: content-box;            /*裁剪方式*/            background-clip: padding-box;        }    </style>    <title>背景</title></head><body><div id="imgContainer">    新华社北京7月29日电（记者刘开雄）近日，针对国务院第四次大督查实地督查发现个别地方仍有企业顶风违规生产“地条钢”问题，中共中央政治局常委、国务院总理李克强作出重要批示强调，督查工作就是要盯住重点问题持续不懈抓。取缔“地条钢”、化解过剩产能要坚定不移推进，防止死灰复燃。对顶风作案的要坚决依法严惩，对监管不力的要严肃问责，务必做到令行禁止。</div></body></html>

结果如下：
这里写图片描述

阅读全文

0 0

CSS基础（二） 个人笔记

文本

1.文本样式

（小应用：文本的垂直居中）

2.文本阴影

3.背景

CSS基础（二）个人笔记