初始CSS

- 日理万妓 2021-12-14 07:45 219阅读 0赞

一、CSS的优势。

内容与表现分离

网页的表现统一 ， 容易修改

丰富的样式 ， 使得页面布局更加灵活

减少网页的代码量 ， 增加网页的浏览速度 ， 节省网络带宽

运用独立于页面的CSS ， 有利于网页被搜索引擎收录

二丶Style标签

Style 标签在HTML文档中的位置 ， 在 <head> 和 </head> 之间。

1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         h1{
         
     8             font-size: 50px;
     9             color: aqua;
    10         }
    11 
    12     </style>
    13 
    14 </head>
    15 <body>
    16 <h1>
    17     爱你三千遍
    18 </h1>
    19 
    20 </body>
    21 </html>

三、引入CSS的方式

**行内样式：**

使用style属性引入CSS样式

**内部样式表：**

CSS代码写在<head>的<style>标签中

**外部样式表 ：**

链接式

1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     
     7     <link rel="stylesheet" href="./css/a.css">
     8 </head>
     9 <body>
    10 <h1>
    11     爱你三千遍
    12 </h1>
    13 </body>
    14 </html>

导入式

链接式与导入式的区别：

使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示

使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页 当中

@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的

CSS样式优先级（就近原则）

行内样式 > 内部样式表 > 外部样式表

四丶CSS选择器

基础选择器

HTML标签作为标签选择器的名称

类选择器

<标签名 class= "类名称">标签内容</标签名>

1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         .feng{
         
     8             color: blue;
     9         }
    10     </style>
    11 
    12 </head>
    13 <body>
    14 <p class="feng">
    15     七月的风，八月的雨
    16 </p>
    17 </body>
    18 </html>

ID选择器

<标签名 id= "id名称">标签内容</标签名>

1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         #a881{
         
     8             color: blue;
     9         }
    10     </style>
    11 
    12 </head>
    13 <body>
    14 <p id="a881">
    15     七月的风，八月的雨
    16 </p>
    17 </body>
    18 </html>

注意所有标签只能id是唯一的不能重复。

ID选择器在同一个页面中只能使用一次

ID选择器>类选择器>标签选择器

五、CSS高级选择器

后代选择器（两个选择符之间用空格隔开）

1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         /*
     8         后代选择器： ul下的所有p标签
     9         */
    10         ul p{
         
    11             background: aquamarine;
    12         }
    13     </style>
    14 </head>
    15 <body>
    16 <p>1</p>
    17 <p>2</p>
    18 <p>3</p>
    19 <ul>
    20     <li><p>4</p></li>
    21     <li><p>5</p></li>
    22     <li><p>6</p></li>
    23 </ul>
    24 </body>
    25 </html>

子选择器：

body>p\{ background: pink; \}

选择匹配的F元素，且匹配的F元素是匹 配的E元素的子元素

1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         /*
     8      子选择器：匹配ul下的子元素li元素
     9         */
    10         ul>li{
         
    11             background: aquamarine;
    12         }
    13     </style>
    14 </head>
    15 <body>
    16 <p>1</p>
    17 <p>2</p>
    18 <p>3</p>
    19 <ul>
    20     <li><p>4</p></li>
    21     <li><p>5</p></li>
    22     <li><p>6</p></li>
    23 </ul>
    24 </body>
    25 </html>

相邻兄弟选择器

1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         /*
     8     相邻兄弟选择器
     9         */
    10        .aaa+p{
         
    11            background: blue;
    12        }
    13     </style>
    14 </head>
    15 <body>
    16 <p class="aaa">1</p>
    17 <p>2</p>
    18 <p>3</p>
    19 <ul>
    20     <li><p>4</p></li>
    21     <li><p>5</p></li>
    22     <li><p>6</p></li>
    23 </ul>
    24 </body>
    25 </html>

转载于:https://www.cnblogs.com/xiaoqiqistudy/p/11064008.html