CSS 的初识

来源：互联网发布：linux下一行编辑：程序博客网时间：2024/06/11 06:07

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>

0 0