CSS 的初识

最新推荐文章于 2024-04-26 22:14:41 发布

CHJ_1993

最新推荐文章于 2024-04-26 22:14:41 发布

阅读量238

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_19815959/article/details/53898381

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS的使用

CSS的引入：

优先级：内联样式表>内部样式表?外部样式表

**内部样式表和外部样式表：
当选择器级别相同是谁后渲染谁生效
当选择器优先级不同时：谁优先级高谁生效**

内联样式表：

直接在标签内部使用style 属性直接写样式

<div style="
    height: 300px; 
    width: 500px;
    background: red;
"></div>

内部样式：

直接在文件内部使用style 属性直接写样式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS引入</title>
        <style type="text/css">
            .mClass{
                height: 300px;
                width: 500px;
                background: red;
            }
        </style>
    </head>
    <body>
        <div class="mClass"></div>
    </body>
</html>

外部样式：

新建一个.css文件
在里面直接输入css样式代码
在HTML 中使用

<link rel="stylesheet" type="text/css" href="css/style.css">

【link】标签的几个属性：

rel:[relationship] ：表示外部文件的与本文件的关系
type:[type]: 外部文件类型
href:[href]: 文件路径

CSS选择器：

优先级：内联样式表>ID选择器>类选择器>标签选择器

标签名选择器:

作用于相同【标签】名的

<style type="text/css">
    <!--在此标签使用的是div-->
    div{
        <!--属性-->
    }
</style>

类选择器：

作用于该类的所有子元素【所有同类名的标签】
可以作用于多个标签

在标签内部加[class=”类名”]： class="myclass" 在style内[ . + 类名+｛｝]：.myClass{}

示例代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS引入</title>
        <style type="text/css">
            .mClass{
                height: 300px;
                width: 500px;
                background: red;
            }
        </style>
    </head>
    <body>
        <div class="mClass"></div>
    </body>
</html>

ID选择器：

作用于本页面中惟一一个ID的
在标签内部加[id=”ID名称”]： id="my_div" 在style内[ # + ID名称+｛｝]：.myClass{}

示例代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS引入</title>
        <style type="text/css">
            #my_div{
                height: 300px;
                width: 500px;
                background: red;
            }
        </style>
    </head>
    <body>
        <div id="my_div"></div>
    </body>
</html>

CHJ_1993

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 的初识

CSS的使用CSS的引入：优先级：内联样式表>内部样式表?外部样式表**内部样式表和外部样式表：当选择器级别相同是谁后渲染谁生效当选择器优先级不同时：谁优先级高谁生效**内联样式表：直接在标签内部使用style 属性直接写样式 <div style=" height: 300px; width: 500px; background: red;">
复制链接

扫一扫