前端基础笔记-css

最新推荐文章于 2022-11-08 13:39:19 发布

简而不凡；卓而不越

最新推荐文章于 2022-11-08 13:39:19 发布

阅读量85

点赞数 2

本文链接：https://blog.csdn.net/weixin_50256876/article/details/117921698

版权

本文详细介绍了CSS样式的各种属性，如字体样式、选择器、伪类选择器、链接伪类选择器、行内样式表、外部样式表等，并通过实例展示了如何设置字体大小、颜色、对齐方式、行间距等。还探讨了块级元素、行内元素和行内块元素的区别以及显示模式转换。最后，讲解了如何使用类选择器、ID选择器以及交集和并集选择器来精确控制网页元素样式。

摘要由CSDN通过智能技术生成

css样式：举例：

<style>
    <!--选择器-->
    h1 {
        <!--键值对-->
        color: red;
        font-size: 25px;
    }
</style>

字体样式属性font-size字号：

相对长度单位	说明
em	相当于当前对象内文本字体尺寸
px	像素

绝对长度单位	说明
in	英尺
cm	厘米
mm	毫米
pt	点

字体样式属性font-family字体：

通常写多个字体，字体名间用逗号隔开，浏览器会一次查看每个字号是否能用。如果是中文字体名或带有空格，&，#等要加引号。

Unicode：

一般来说字体直接写中文名即可，但有些系统下可能无法识别，会显示乱码，这时换成字体的英文名或其Unicode即可解决。

css注释：

/*注释内容*/

字体样式属性font-weight粗细：

bold（相当于数字700），normal（相当于数字400），lighter，bolder，其他数字。

字体样式属性font-style字体风格：

normal，italic（倾斜）

字体样式综合设定（简化设置）：

font：{font-style font-weight font-size/font-height font-family；}

必须按顺序且空格隔开，除family和size外其他可以省略。

类选择器：

. 类名 {属性1：值；属性2：值；}调用时在标签中添加class=“类名”。

多类名选择器：

class=“类名1 类名2 类名3”可以调用多个类。

ID选择器：

#id名 {属性1：值；属性2：值；}调用时在标签中添加id=“id名”

类选择器和ID选择器的区别：

类选择器可以重复使用多次，ID选择器只能用一次。

通配符选择器：

* {属性1：值；属性2：值；}可以给所有标签元素使用。

通常用法：*={margin：0；padding：0；}把内外边距设为0.

伪类选择器：

标签：名 {属性1：值；属性2：值；}

<head>
    <style>
        a:link {
                font-size:16px;
                color:red;
                }
        a:visited {
                    font-size:16px;
                    color:orange;
                    }
    </style>
</head>
<body>
    <a href=# >内容</a>
</body>

链接伪类选择器：

：link	未访问的链接
：visited	已访问过的链接
：hover	鼠标移动到了连接上
：active	鼠标按住链接不松开时

写的时候四个的顺序不能颠倒

结构（位置）伪类选择器：

：first-child	选择其父元素的第一个子元素
：last-child	选择其父元素的最后一个子元素
：nth-child（n）	选择其父元素的第n个子元素，括号里填even表示选偶数，odd表示奇数
：nth-last-child（n）	倒着数

<head>
    <style>
        li:nth-child(3n+1) {
                            color:red;
                             }
    </style>
</head>
<body>
    <ul>
        <li>一</li>
        <li>二</li>
        <li>三</li>
    </ul>
</body>

目标伪类选择器：

：target {属性1：值；属性2：值；}选取当前活动的目标元素

可以和锚点定位结合起来，党点击当前页面的链接跳转到当前页面的内容时当前元素即为目标元素。

行间距：

line-height

一般比字号大7，8个px即可

水平对齐方式：

text-align

left（默认），right，center

首行缩进：

text-indent

建议用em作为单位

字间距：

letter-spacing

单词间距：

word-spacing

只对英文单词有效

内部样式表：

写在

里面

行内样式表：

<标签名 style=“属性1：值；属性2：值；”>内容标签名>

外部样式表：

写在.css文件里面。通过link标签引用到HTML文件中。

<head>
    <link href="css文件路径" type="text/css" rel="stylesheet" />
</head>

块级元素：

通常占一行或多行，例如：

,

等。可以控制高度，对齐，宽度（默认为容器的100%），外边距，内边距。可以容纳内联元素和其他块元素。

除外，它里面不能再放其他块元素。

行内元素：

也是内联元素，例如,,,,,等，不可设置高度，宽度，对齐。默认宽度就是其内容宽度，只能设置padding，margin。只能容纳文本和其他元素。

行内块元素：

比行内元素多特点时可以设置宽度，高度，对齐，内外边距。比如：,,

显示模式转换：

块转行内：display：online

行内转块：display：block

快或行内转行内块：display：inline-block

<style>
    div {
        background-color:pink;
        height:100px;
        width:100px;
        display:inline;
    }
</style>

交集选择器：

标签选择器+类选择器组合

标签.类名 { }同时被这两个选择器选中的元素才有作用。

并集选择器：

多个选择器之间用逗号隔开。对所有选择器选中的元素都起作用。

后代选择器：

开头是点（.）,外层选择器写前面，内层选择器写后面，两者间用空格隔开。当内层元素时外层元素后代时便会被选中。

子元素选择器：

开头是点（.）外层选择器前，内层选择器后，两者用>连接。当内层元素时外层元素的儿子时才被选中。不包括孙子即后代。

属性选择器：

属性选择器	描述
标签[属性]	存在此属性即可
标签[属性=值]	属性值完全相同
标签[属性*=值]	属性值里面有即可
标签[属性^=值]	属性值在开头
标签[属性&=值]	属性值在末尾

伪元素选择器：

标签：：first-letter {}	选中文本中的第一个单词或字
标签：：first-line {}	选中最后一个
标签：：selection {}	选中鼠标按住选中的内容
标签：：befor {content：“内容”}	在标签内容前面插入content中内容
标签：：after {content：“内容}	在标签内容后插入