初识HTML(四)---CSS(超详细)

￡神魔★判官ぃ 2022-12-19 13:08 230阅读 0赞

# CSS #

### css ###

*  CSS
 *   *  简介
     *  基础用法
     *  高级用法---选择器
     *   *  id选择器
         *   *  什么是id
             *  id选择器如何使用
         *  类选择器
         *  属性选择器
     *  引用方式
     *   *  HTML内引入
         *  外部导入

## 简介 ##

简单来说css就是来控制元素样式的  
w3school [手册][Link 1]  
为什么要用css呢 样式重复以及代码看着难受等问题 如下图对比  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center]实现此代码  
一

二

<html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    
    		<style> .one{ width: 100px;height: 100px;background-color: black;float:right; } .two{ width: 100px;height: 100px;background-color: red; } .three{ width: 100px;height: 100px;background-color: green;float: left; } .four{ width: 100px;height: 100px;background-color: yellow;float: right; } </style>
    	</head>
    	<body>
    		<div class="one"></div>
    		<div class="two"></div>
    		<div class="three"></div>
    		<div class="four"></div>
    	</body>
    </html>

当然样式代码还可以更简洁 此处对比元素内代码的多少

## 基础用法 ##

通过在head标签中的style标签可以来控制样式

<html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style> h1{ color: #FF0000; } h2{ color: aqua; } </style>
    	</head>
    	<body>
    		<h1>我是狗</h1>
    		<h2>巧了，我也是狗</h2>
    	</body>
    </html>

![在这里插入图片描述][20201107164647762.png_pic_center]

## 高级用法—选择器 ##

### id选择器 ###

对id标记的元素调整样式

#### 什么是id ####

id=“data”  
data就是id的值 标记此元素id值为data  
简单来说就是  
某个人你可以不知道它叫什么 但是他的代号是 张三 id=“张三”  
但是id是唯一的  
一个公司中只能有一个代号张三

#### id选择器如何使用 ####

<html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style> #oneH{ color: #0000FF; } </style>
    	</head>
    	<body>
    		<h1 id="oneH">我是狗</h1>
    	</body>
    </html>

![在这里插入图片描述][20201107165613806.png_pic_center]

在style标签中用\#来标记 比如id=“one”  
就写成  
\#one\{  
…  
\}

### 类选择器 ###

什么是类  
class  
元素属性的类名  
示例如下

<html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style> .oneH{ color: #0000FF; } </style>
    	</head>
    	<body>
    		<h1 class="oneH">我是狗</h1>
    		<h2 class="oneH">我是猪</h2>
    	</body>
    </html>

![在这里插入图片描述][2020110716595867.png_pic_center]

在style标签中用\#来标记 比如class=“one”  
就写成  
.one\{  
…  
\}  
class是公用的 多个元素可以用同一个class

### 属性选择器 ###

**什么是属性**  
name title id class等待都是元素属性  
但是id class都有特定的所以除去这俩用属性选择器  
  
\[attribute\]选取带有指定属性的元素  
  
\[attribute=value\]选取带有指定属性和值的元素  
  
\[attribute~=value\]用于选取属性值用于中包含指定字符串的元素  
  
\[attribute|=value\]用于选取带有以指定值开头的属性值的元素，该值必须是完整字符串  
  
\[attribute^=value\]用于属性值以指定值开头的每个元素  
  
\[attribute$=value\]用于属性值以指定值)结尾的每个元素  
  
\[attribute\*=value\]用于匹配属性值中包含指定值的每个元素  
  
用法如下

<html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style> [name]{ color: red;[attribute]选取带有指定属性(此处为name)的元素 } [name=two]{ color: #0000FF;[attribute=value]选取带有指定属性(此处为name)和值(此处为two)的元素 } [name~=twenty]{ color: aqua;[attribute~=value]用于选取属性值(此处为name)用于中包含指定(此处为twenty)字符串的元素 } [name|=five]{ color: blueviolet;[attribute|=value]用于选取带有以指定值(此处为five)开头的属性值(此处为name)的元素，该值必须是完整字符串 } [name^=he]{ color: chartreuse;[attribute^=value]用于属性值(此处为name)以指定值(此处为he)开头的每个元素 } [name$=p]{ color: darkgreen;[attribute$=value]用于属性值(此处为name)以指定值(此处为p)结尾的每个元素 } [name*=god]{ color: black;[attribute*=value]用于匹配属性值(此处为name)中包含指定值(此处为god)的每个元素 } </style>
    	</head>
    	<body>
    		<h1 name="one">我是狗</h1>
    		<h1 name="two">我是狗</h1>
    		<h1 name="twenty three">我是狗</h1>
    		<h1 name="twenty four">我是狗</h1>
    		<h1 name="three">我是狗</h1>
    		<h1 name="five-one">我是狗</h1>
    		<h1 name="five one">我是狗</h1>
    		<h1 name="hello">我是狗</h1>
    		<h1 name="wow p">我是狗</h1>
    		<h1 name="oh god cool">我是狗</h1>
    	</body>
    </html>

![在这里插入图片描述][20201107172422332.png_pic_center]

## 引用方式 ##

### HTML内引入 ###

写在style标签内

### 外部导入 ###

引用css文件(本地/网络)  
文件目录  
![在这里插入图片描述][20201107173627788.png_pic_center]

.one{
    	color: red;
    }

![在这里插入图片描述][20201107174037503.png_pic_center]

同样可以引用别人的网络资源中的css

比如一些字体或者特效样式

后续会推出

前端：js入门 vue入门 vue开发小程序 等  
后端： java入门 springboot入门等  
服务器：mysql入门 服务器简单指令 云服务器运行项目  
python：推荐[不温卜火][Link 2] 一定要看哦  
一些插件的使用等

大学之道亦在自身，努力学习，热血青春  
如果对编程感兴趣可以加入我们的qq群一起交流：974178910  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center 1]

有问题可以下方留言，看到了会恢回复哦

[Link 1]: https://www.w3school.com.cn/css/css_jianjie.asp
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/ee640a1126ed4565a767f6bc2b25fb65.png
[20201107164647762.png_pic_center]: /images/20221120/7696a7736aff4e6993c7d868905a6ee8.png
[20201107165613806.png_pic_center]: /images/20221120/1a40bea6c4a14ab8b0253f1e7ea2e497.png
[2020110716595867.png_pic_center]: /images/20221120/0df9a6f8c964487688a9e65cfc0d5824.png
[20201107172422332.png_pic_center]: https://img-blog.csdnimg.cn/20201107172422332.png#pic_center
[20201107173627788.png_pic_center]: https://img-blog.csdnimg.cn/20201107173627788.png#pic_center
[20201107174037503.png_pic_center]: https://img-blog.csdnimg.cn/20201107174037503.png#pic_center
[Link 2]: https://buwenbuhuo.blog.csdn.net/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201107174000509.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70#pic_center