css样式

熬只小饼干

已于 2022-06-05 16:42:51 修改

阅读量176

点赞数

文章标签： css html

于 2022-05-26 23:06:54 首次发布

本文链接：https://blog.csdn.net/m0_54486934/article/details/124993316

版权

1.css的作用

在网页开发中经常碰到这样的场景：

需要设置页面上某些元素的外观：字的颜色，字的大小，字的对齐方式，背景颜色或者背景图像等
web标准构成：结构（HTML），表现（css），行为（JavaScript）
css样式决定了网页的外观

2.css的分类

按照css样式代码的位置分类：

行内样式

在标签中使用html属性“style”来引用css样式

建议尽量少写，行内样式只在该标签中有效

<标签 style="属性名：值；......."></标签>

内嵌样式

在本页面的head头部的<style></style>标签中书写内嵌样式的作用范围就是本页面

<head>
    <style>
        选择器{
            属性名：值；
            ......
        }
    </style>
</head>

外部样式

人员建立独立的样式文件来书写css样式：*.css

在页面中引用该样式文件：<link type="text/css" rel="stylesheet" href="css文件名”>

选择器{
      属性名：值；
      ......
}

外部样式的作用范围：

引用了该外部样式文件的页面中有效

建议：尽量使用外部样式
好处：作用范围最宽广；最大程度的复用css样式代码；html页面文件和样式文件是分离的有利于开发过程中各个职位分工合作

3.css文字属性

font-style（字体样式）: normal（正常）、italic（斜体）或oblique（倾斜）;

font-variant (字体变化): normal（正常）或small-caps（小体大写字母）;

font-weight (字体浓淡): 是normal（正常）或bold（加粗）。有些浏览器甚至支持采用100到900之间的数字（以百为单位）;

font-size（字体大小）: 可通过多种不同单位（比如像素或百分比等）来设置, 如：12xp，12pt，120%，1em

line-height（只能在font-size后面以/接上，如果16px/24px，表示字体16px， 24line-height）;

font-family（字体）: “Arial”、“Times New Roman”、“宋体”、“黑体”等;

font缩写的时候，必须有font-size和font-family两个值，否则不生效，其他值可省略，有默认值。

颜色：color：值

值的写法：1>颜色的英文单词

2>6位16进制数字：#ffffff；#000000；三基色（红，绿，蓝）

对齐方式：text-align：left|right|center默认是左对齐

文字修饰：text-decoration：none|underline

4.css样式规则

css样式规则：

选择器{

css属性名：值；

.......

}

5.选择器的分类

标签选择器：选择器名=标签名

效果：页面中同一种标签同一种样式

类选择器：.类名(类名是自己命名的){}

引用：class="类名”

效果：页面中同一种标签不同样式，不同标签同一种样式(展示结果中的一四行）

id选择器：#id名{.......}

引用：id=“id名”

效果：页面中唯一，浏览器不会检查页面中引用id选择器是否唯一，程序员约定id选择器在页面中应该唯一

通配符选择器：*

效果：选择页面中所有的元素

用来统一设置一个页面中全部文字的字体，字大小，外边距和内边距

后代选择器：选择器1 选择器2(….)

效果：选取出来的元素需要满足选择器2的规则，同时需要位于选择器1选取出来的元素中间。限定了上面的祖先标签

伪类选择器：a:linked{....} a:visited{....} a:hover{....}

效果：超链接+操作的动作来选取元素，a:hover，选取鼠标悬停在它上面的超链接

6.代码示例

main.css

/*样式书写规范

选择器{

    css属性名：css属性值；

    //.....

}*/

/* 通配符选择器 */

*{

    margin: 0;/*外边距*/

    padding: 0;/*内边距*/

    font-family: 宋体;

    font-size: 16px;

}

/*标签选择器*/

p{

   color: pink;

   border: 1px solid red;

}

/*类选择器*/

.big{

    font-size: 30px;

}

/* id选择器:id名自己定义*/

#test{

    color: red;

}

/* 后代选择器 */

p a{

    color: yellow;

    font-size: 24px;

}

/* 伪类选择器 */

a{

    color: #666;

    text-decoration: none;/*下划线操作 （无下划线）*/

}

a:hover{

    color: red;

    text-decoration: underline;

    font-size: 20px;

}

css.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>演练选择器</title>

    <link rel="stylesheet" href="../css/main.css">

</head>

<body>

    <p class="big">今天下雨了</p>

    <p>上课摸鱼</p>

    <p>游戏输了</p>

    <span id="test" class="big">游戏又赢了</span>

    <div id="test">层中文字</div>

    <a href="http://www.baidu.com">百度</a>

    <p>

        <a href="http://www.cnblog.com">博客园</a>

    </p>

</body>

</html>

运行结果展示

（鼠标悬停效果）

font.html

<!DOCTYPE html>

<html lang="zh-CN">

<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>演练字体设置</title>

    <style>

        /* 统一页面中的所有文字，字体：汉字为仿宋体；西文roman；字体大小：20px;

         层中文字：斜体；段落文字：加粗 */

        *{

            /* font-family: 'Times New Roman', Times, serif,仿宋体;

             font-size: 20px; */

            font:20px 'Times New Roman', Times, serif,仿宋体;

            color: #27c449;

            text-align: center;

        }

        div{

            font-style: italic;

            border:1px solid red ;

        }

        p{

            font-weight: bold;

        }

        .old{

            color: #999;

            text-decoration: line-through;

        }

        .new{

            color: red;

            font-size: 30px;

        }

    </style>

</head>

<body>

    <div>

        演练文字abc

    </div>

    <!-- 10加上删除标记，5变大颜色红色 -->

    <p>干饭ABC,单价：原价<span class="old">10</span>元，现价<span class="new">5</span>元</p>

</body>

</html>