ruorbb自用|前端学习3——CSS网页美容师

最新推荐文章于 2024-10-14 18:12:09 发布

xswdexgz

最新推荐文章于 2024-10-14 18:12:09 发布

阅读量65

点赞数

文章标签：前端 css 学习

本文链接：https://blog.csdn.net/weixin_45976685/article/details/126999091

版权

CSS主要适用场景就是美化网页、布局页面的，也是一种标记语言

主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形以及版面的布局和外观显示样式

html只关注内容的语义，丑，繁琐和臃肿，主要做结构

CSS最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构和样式分离

一、CSS语法规范

选择器{样式}

给谁改样式{改什么样式}

<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: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <p>interesting</p>
</body>

二、CSS代码风格（如上）

三、CSS选择器

作用：选择标签用的

选对人，做对事

1、选择器分类

选择器分为基础选择器和复合选择器。

基础选择其实有单个选择器组成的，包括：标签选择器、类选择器、id选择器、通配符选择器。

（1）标签选择器

把某一类标签全部选择出来，比如说所有的<p>

<head>    
    <style>
        /* 标签选择器：写上标签名 */
        p {
            color: green;
        }
        div {
            color: pink;
        }
    </style>
</head>
<body>
    <p>man</p>
    <p>man</p>
    <p>man</p>
    <div>woman</div>
    <div>woman</div>
    <div>woman</div>
</body>

（2）类选择器

差异化选择不同的标签，单独选一个或几个标签。

类选择器口诀：样式点定义，结构类（class）调用，一个或多个，开发最常用

注意：1.长名称或词组可以使用中横线来为选择器命名（star-sing）

2.不要使用纯数字、中文等命名，尽量使用英文字母来表示

3.命名要有意义，尽量让别人一看就知道

4.Web前端开发规范手册——命名规范

<head>
 <style>
        /* 类选择器口诀：样式点定义，结构类（class）调用，一个或多个，开发最常用 */
        .red {
            color: red;
        }
        .star-sing {
            color: blueviolet;
        }
    </style>
</head>
<body>
    <ul>
        <li class="red">happy</li>
        <li class="red">happy</li>
        <li>happy</li>
        <li>happy</li>
        <li>happy</li>
    </ul>
    <div class="red">red</div>
</body>

<1>多类名

优点：节省CSS代码，统一修改也非常方便

适用场景：可以把一些标签元素相同的样式（共同部分）放到一个类里

这些标签都可以调用这个公共的类，然后再调用自己的类

在后期布局比较复杂的情况下，还是较多使用的

类名与类名之间要用空格分开

<head>
<style>
        .red {
            color: red;
        }
        .font35 {
            font-size: 35px;
        }
    </style>
</head>
<body>
    <div class="red font35">sum</div>
</body>

（3）id选择器

id选择器口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用

<head>
<style>
        /* id选择器口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用 */
        #pink {
            color: pink;
        }
    </style>
</head>
<body>
    <div id="pink">maichel</div>
    <div >maichel</div>
</body>

与类选择器的区别：1.类选择器好比人的名字，一个人可以有多个名字，同一个名字也可以被多个

人使用；

2.id选择器好比人的身份证，不可重复；

3.二者最大的不同在于使用次数上；

4。类选择器在修改样式里使用最多，id选择器一般用于页面唯一性的元素

和JavaScript搭配使用。

（4）通配符选择器

表示选取页面中所有元素，不需要调用，特殊情况下才使用

<head>
<style>
        * {
            color: red;
        }
        /*      *这里把html body div span li 等等的标签都改为了红色      */
    </style>
</head>
<body>
    <div>mine</div>
    <span>mine</span>
    <ul>
        <li>还是我的</li>
    </ul>
</body>