CSS 的初识

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_19815959/article/details/53898381

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>

展开阅读全文

没有更多推荐了,返回首页