CSS day1

Follow_浩弟

已于 2023-08-14 17:54:38 修改

阅读量33

点赞数

分类专栏： CSS 文章标签： css 前端

于 2023-08-13 21:20:14 首次发布

本文链接：https://blog.csdn.net/Follow_haodi/article/details/132265465

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS简介

从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。

什么是CSS样式？

简单来说，层叠样式表（Cascading Style Sheet）是一种专门用来控制界面外观风格的文档。主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

CSS使用方式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 内联样式 -->
    <style>
        /* 选择器 */
        
        p {
            color: pink;
        }
    </style>

    <!-- 外联样式 -->
    <link rel="stylesheet" href="./01-外联样式.css">
</head>

<body>
    <!-- css四种使用方式 -->
    <!-- 1.行内样式  不好维护，代码结构不清晰，不推荐使用 -->
    <!-- 2.内联样式  只适合写小练习，不适合写大项目，只作用于本页面 -->
    <!-- 3.外联样式  可以作用于多个页面，一个页面可以引入多个css文件，没有缺点 -->
    <!-- 4.导入外部样式表  很少使用，一般只会导入一些基本样式 -->

    <!-- 1.行内样式 -->
    <div style="color: red;">我是最经典的块级元素</div>
    <!-- 2.内联样式 -->
    <p>我是段落标签</p>
    <p>我是段落标签2</p>

    <!-- 3.外联样式 -->
    <span>我是span标签</span>
</body>

</html>

CSS字体属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 内联样式 -->
    <style>
        p {
            font-size: 32px;
        }
        
        div {
            /* 1.字体大小 */
            /* 字体大小默认值为 16px，最小值为 12px */
            /* 1.1 单位px */
            font-size: 20px;
            /* 1.2 单位em, em会根据父元素的字体大小变化而变化 */
            /* font-size: 2em; */
            /* 2.字体家族 */
            font-family: "微软雅黑";
            /* 3.字体粗细 */
            /* lighter 细体    normal 默认   bold 加粗 */
            /* 100-300 细体    400-500 正常    600-900 加粗 */
            font-weight: 700;
            /* 4.字体风格 */
            /* normal 默认正常   italic 倾斜 */
            font-style: normal;
            /* 5.综合写法 */
            /* font: font-style font-weight font-size font-family; */
            /* 可选        可选        必须           必须 */
            font: 30px "楷体";
        }
        
        b {
            /* 取消字体加粗 */
            font-weight: normal;
        }
        
        i {
            /* 取消字体倾斜 */
            font-style: normal;
        }
    </style>
</head>

<body>
    正常文本
    <div>
        TFBoys演唱会门票真贵啊
    </div>
    <p>TFBoys演唱会门票真贵啊</p>

    <span>正常文本</span>
    <b>字体加粗</b>
    <i>字体倾斜</i>
</body>

</html>

CSS基本选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 基本选择器 */
        /* 1.标签选择器 */
        div {
            font-size: 20px;
        }

        /* 2.类名选择器 */
        /* 一个标签可以有多个类名;一个类名选择器可以作用域多个元素 */
        .box {
            color: red;
        }

        .box1 {
            font-weight: 700;
        }

        /* 3.ID选择器 */
        /* id具有唯一性,不能出现相同的id */
        #pox {
            font-style: italic;
        }

        /* 4.通配符选择器 */
        /* 作用域所有的元素,一般用于做页面的初始化样式 */
        * {
            font-family: "楷体";
            color: white;
        }
    </style>
</head>

<body>
    <div class="box box1">快该干饭了</div>
    <div id="pox">好饿,今天中午吃啥?</div>
    <p class="box">世界难题就是吃啥</p>
</body>

</html>

CSS伪类选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 伪类选择器 */
        /* 1.未访问的链接 */
        .alink:link {
            color: green;
        }

        /* 2.激活时的链接 */
        .alink:active {
            color: pink;
        }

        /* 3.访问后的链接 */
        .alink:visited {
            color: orange;
        }

        /* 4.鼠标移入时 */
        .alink:hover {
            font-size: 30px;
            font-weight: 700;
        }
    </style>
</head>

<body>
    <a href="./03-字体属性.html" class="alink">百度一下</a>
</body>

</html>

文本属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            /* 字体颜色 */
            /* 单词  red green blue pink orange yellow black white purple gray springgreen skyblue deeppink */
            /* color: red; */
            /* 16进制  123456789abcdef  f00 0f0 00f 000 fff ccc 999 */
            /* color: #ccc; */
            /* rgb表示法  0-255 */
            /* color: rgb(255, 0, 0); */
            /* rgba表示法  a代表透明度,值是 0-1 之间的数 */
            color: rgba(255, 0, 0, 0.2);


            /* 行间距 */
            /* line-height: 30px; */
            /* 单行文本垂直居中: 行高 = 盒子高  注意:是单行文本!!! */
            line-height: 100px;


             /* 文本对齐方式     默认left  居中center  右对齐right  两端对齐justify */
             text-align: justify;


             /* 首行缩进 */
            text-indent: 2em;



            /* 文本修饰 */
            /* overline 上划线 */
            /* underline 下划线 */
            /* line-through 贯穿线 */
            /* none  取消文本修饰 */
            text-decoration: line-through;



             /* 字符间距 */
             letter-spacing: 5px;
            /* 单词间距 */
            word-spacing: 10px;


            /* 文字阴影 */
            /* text-shadow: 水平偏移 垂直偏移 模糊距离 阴影颜色; */
            /*                 必须     必须    可选    可选 */
            text-shadow: 5px 10px 2px #f00;
        }
    </style>
</head>

<body>
    <div>大丈夫生于天地之间,岂能郁郁久居人下</div>
</body>

</html>

Follow_浩弟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS day1

从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。简单来说，层叠样式表（Cascading Style Sheet）是一种专门用来控制界面外观风格的文档。
复制链接

扫一扫

专栏目录