web前端--CSS（二）

最新推荐文章于 2020-12-01 12:34:24 发布

前端小窝

最新推荐文章于 2020-12-01 12:34:24 发布

阅读量162

点赞数 1

分类专栏： # CSS

本文链接：https://blog.csdn.net/weixin_44105459/article/details/102556631

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS主要描述HTML中的信息（文本、框图、表格等）
这次主要包括选择样式、控制边框和背景、设置文本样式三个方面。

1、选择样式

（1）选择所有元素：*
（2）根据类设置属性：.class1{}
（3）根据id： #id1{}
（4）根据属性选择元素：【href=href1】{}
（5）:冒号选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式</title>
    <style type="text/css">
        *{/*设置所有样式都一样用**/
            font-size: 30px;
            color: #ff2539;
        }
        [href="02CSS选择样式.html"]{}
        a:hover{/*鼠标经过时变化*/
            font-size: 30px;
            color: #dbff08;
        }
    </style>
</head>
<body>
<a class="class1">文本</a>
<a href="02CSS选择样式.html">文本2</a>
<a class="class1"> 文本</a>
<p>文本3</p>
<h1>一级标题</h1>
</body>
</html>

2、控制边框和背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式</title>
    <style type="text/css">
        *{/*设置所有样式都一样用**/
            font-size: 30px;
            color: #ff2539;
        }
        [href="02CSS选择样式.html"]{}
        a:hover{/*鼠标经过时变化*/
            font-size: 30px;
            color: #dbff08;
        }
    </style>
</head>
<body>
<a class="class1">文本</a>
<a href="02CSS选择样式.html">文本2</a>
<a class="class1"> 文本</a>
<p>文本3</p>
<h1>一级标题</h1>
</body>
</html>

在这里插入图片描述

3、文本样式

1、对齐文本 text-align:center
2、文本方向 direction:ltr从左到右,rtl右左
3、字符间距 letter-spacing:10px
4、首行缩进 text-indent
5、文本装饰 text-decoration:underline下划线, line-through删除线
6、文本大小写转换 text-transform:capitalize， lowercase小写, upercase大写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式上</title>

</head>
<style type="text/css">
    .class3{
        text-align:center;
        direction: rtl;
        letter-spacing:10px;/*字母或字间距*/
        word-spacing: 3px;/*单词间距*/
        text-indent: 20px;
        text-decoration: line-through;
        text-transform: capitalize;首字母自动大写
    }
</style>
<body>
<p class="class3">文本123456789</p>
</body>
</html>

在这里插入图片描述

前端小窝

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端--CSS（二）

CSS主要描述HTML中的信息（文本、框图、表格等）这次主要包括选择样式、控制边框和背景、设置文本样式三个方面。1、选择样式（1）选择所有元素：*（2）根据类设置属性：.class1{}（3）根据id： #id1{}（4）根据属性选择元素：【href=href1】{}（5）:冒号选择器<!DOCTYPE html><html lang="en"&gt...
复制链接

扫一扫