HTML+CSS+JavaScript第四天

最新推荐文章于 2024-09-14 21:53:48 发布

LearnerZJ

最新推荐文章于 2024-09-14 21:53:48 发布

阅读量38

点赞数

分类专栏： HTML+CSS+JavaScript 文章标签：学习 css

本文链接：https://blog.csdn.net/2301_77751199/article/details/133898107

版权

HTML+CSS+JavaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

CSS是层叠样式表，是一种标记语言，直接由浏览器执行，不需要编译。

CSS语法由三部分组成：选择器，属性和属性值(规定样式)，selector {property: value}

CSS的推荐代码风格：

selector {

property: value;

}

CSS不区分大小写，但是尽量使用小写

空格规范：selector后加空格，property：后加空格

selector选择器的作用是选择要改变样式的标签

选择器分为基础选择器和复合选择器两大类，基础选择器是由单个选择器组成的

基础选择器包括：标签选择器，类选择器，id选择器，通配符选择器。

标签选择器：选中页面中所有的该标签，设置统一的样式。

<html>
    <head>
        <!-- 样式表必须要放在style标签内部，style标签尽量放在head内部 -->
        <style>
            p {
                color: red;
            }
        </style>
    </head>
    <body>
        <p>lallll</p>
        <p>huhuhu</p>
    </body>
</html>

类选择器：.class类名 {...} class要在我们改变样式的标签中设置，实现样式差异化

当类名比较长或词组的时候，可以使用中横线来命名，尽量使用英文字母来命名。命名一定要有意义。

<html>
    <head>
        <!-- 样式表必须要放在style标签内部，style标签尽量放在head内部 -->
        <style>
            .red {
                color: red;
            }
        </style>
    </head>
    <body>
        <p class="red">lallll</p>
        <p>huhuhu</p>
    </body>
</html>

类选择器的另一种情况：多类名，多个类名之间用空格隔开。

<html>
    <head>
        <!-- 样式表必须要放在style标签内部，style标签尽量放在head内部 -->
        <style>
            .red {
                color: red;
            }
            .size {
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <p class="red size">lallll</p>
        <p>huhuhu</p>
    </body>
</html>

id选择器：根据id属性来选择标签，由于id是唯一的，因此id选择器的样式只会被调用一次

类选择器相当于人名，id选择器相当于身份证号，对于修改样式类选择器用的多，id选择器常与JavaScript搭配使用。

<html>
    <head>
        <!-- 样式表必须要放在style标签内部，style标签尽量放在head内部 -->
        <style>
            #red {
                color: red;
            }
        </style>
    </head>
    <body>
        <p id="red">lallll</p>
        <p>huhuhu</p>
    </body>
</html>

通配符选择器：* 表示选中所有的标签，特殊情况采用，例如清除所有标签元素的内外边距。

<html>
    <head>
        <!-- 样式表必须要放在style标签内部，style标签尽量放在head内部 -->
        <style>
            * {
                color: red;
            }
        </style>
    </head>
    <body>
        <p>lallll</p>
        <p>huhuhu</p>
    </body>
</html>

样式：

字体属性：设置字系列，大小，粗细，文字样式。

fond-family	设置字体	"Microsoft YAHEI"，"微软雅黑"，Arial 该属性值可有多个字体，每个字体用逗号隔开，如果有空格隔开的多个单词组成的字体，需要加上双引号，英文，中文都可以，但是尽量使用英文，例如"Microsoft YAHEI" 浏览器会看第一个字体是否兼容，若不兼容就查看下一个字体，若输入的字体浏览器都不兼容，就采用浏览器默认的字体：微软雅黑。
fond-size	设置字体大小	谷歌浏览器默认的文字大小是16px，不同浏览器默认显示的文字大小可能不一样，故尽量给一个明确的大小设置时需要加单位：px 给body添加该样式可以修改整个页面的文字大小。
fond-weight	设置字体粗细	normal 默认值，不加粗相当于400 bold 加粗相当于700 取值区间100-900，该数字后面不跟单位起强调作用，也可以使用h或strong标签
fond-style	设置文字样式	normal 默认值 italic 斜体很少给文字加斜体样式，而是经常给斜体标签em，i改为不倾斜字体，即fond-style = normal
fond	字体复合属性	同时设置字体样式，顺序是： fond：fond-style fond-weight fond-size/line-height fond-family 各个属性用空格隔开 fond-size，fond-family属性必须有，其它属性可以省略

文本属性：

设置文本的颜色，对齐，装饰，缩进，行距

color	设置颜色	三种表示法：预定义的颜色值：red，green等十六进制：#FF6600,常用 RGB代码：rgb(255,0,0)或rgb(100%,0%,0%)红绿蓝
text-align	设置对齐方式	left 左对齐，默认 right 右对齐 center 居中对齐
text-decoration	设置装饰	none 默认，没有装饰线 underline 下划线，a标签自带下划线，可以使用该样式去除下划线 overline 上划线 line-through 删除线
text-indent	设置文本第一行的缩进	通常是将段落的首行缩进单位是px，但是常用的是em 因为em是相对单位，1em就是当前1个文字的fond-size。
line-height	设置行高	单位是px

样式表按照引入方式分类：内部样式表，行内样式表，外部样式表

内部样式表：将css代码写到一个style标签内部，上面的例子就是内部样式表，用的不多，常用于简单样式

行内样式表：设置标签的style属性，用的不多，常用于简单样式

<html>
    <head>
    </head>
    <body>
        <p style="color: red">lallll</p>
        <p>huhuhu</p>
    </body>
</html>

外部样式表：将css代码单独放到.css文件中去，搭配link标签使用，这种方式用的多。

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <p>lallll</p>
        <p>huhuhu</p>
    </body>
</html>

style.css文件：