HTML基础（CSS）

柔情只为你懂 2022-03-01 10:42 209阅读 0赞

# HTML基础（CSS） #

## 一、html代码中引入CSS代码 ##

<head>
    	
    	<style type="text/css"> a{ color: #F0F; text-decoration: none; } </style>
    	
    	<link href="1.css" rel="stylesheet"/>
    	
    	<style type="text/css"> @import url("1.css"); </style>
    
    	<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
    	<title>CSS</title>
    </head>
    <body>
    	
    	<a style="color:#F0F;text-decoration: none" href="#">新闻标题1	</a>
    	<a href="#">新闻标题2	</a>
    	<a href="#">新闻标题3	</a>
    	<a href="#">新闻标题4	</a>
    </body>

其中方法二、三为引入外部CSS文件:

/*1.css*/
    a{ 
    	color: #F0F;
    	text-decoration: none;
    }

## 二、选择器 ##

### 1、标签选择器 ###

上述代码中：`a{…}`为标签为a的所有内容应用该CSS代码。

### 2、类选择器 ###

`.class{…}。`

相当于可以自定义应用CSS代码的范围，在需要应用的内容的标签增加class属性（不能以数字开头）。且类选择器样式优先于标签选择器。

<head>
    	<style type="text/css"> /*div{ color: #F00; font-size: 24px; }*/ .two{ background-color: #0F0; color: #F00; font-size: 24px; } </style>
    	<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
    	<title>CSS</title>
    </head>
    <body>
    	<div>这个是第一个div标签</div>
    	<div class="two">这个是第二个div标签</div>
    	<a href="#">新闻标题</a>
    </body>

### 3、id选择器 ###

*  优先级优于类选择器
 *  id属性值也不能以数字开头
 *  id属性值在一个html页面只有一个

#one{
    			background-color: #FF9;
    			color: #999;
    			font-weight: 500;
    		}
    <div id="one">这个是第二个div标签</div>

### 4、交集选择器 ###

对选择器1中的选择器2里面的数据进行样式化。

div span{
    			background-color: #999;
    			font-size: 24px;
    		}
    
    <div id="one" class="test">这个是<span>第一个div标签</span>...</div>
    <div id="one" class="two">这个是<span>第二个div标签</span>...</div>
    <a href="#">新闻标题</a>

结果如下：

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aQd6yRQ4-1582809045114)(/Users/jc/Library/Application Support/typora-user-images/image-20190311140753471.png)\]

### 5、并集选择器 ###

span,a{
    	border-style:solid;
    	border-color:#F00;
    }

### 6、伪类选择器 ###

对元素处于某种状态下进行的样式。

<head>
    <style type="text/css"> a:link{ color:#F00} /*没有被点击过*/ a:visited{ color:#0F0} /*已经被访问（点击）过*/ a:hover{ color: #00f;font-size: 24px} /*鼠标经过*/ a:active{ color: #FF0} /*选中：鼠标点击未松开*/ </style>
    	
    	<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
    	<title>无</title>
    </head>
    <body>
    	<a href="#">百度</a>
    </body>

注意：hover必须置于link和visited之后才有效；

active必须置于hover后才有效。

## 三、定位 ##

### 1、相对定位 ###

以当前标签左上角为基准移动。

### 2、绝对定位 ###

以页面左上角为基准移动。

### 3、固定定位 ###

以浏览器左上角为基础，移动之后不会根据页面的滚动而发生变化。

三种定位情形代码如下：

<head>
    	<style type="text/css"> div{ border-style: solid; width: 100px; height: 100px; } .one{ background-color: #F00; } .two{ background-color: #0F0; position: relative; top: 10px; left: 10px; } .three{ background-color: #00F; } #ad{ width: 400px; height: 200px; border-style: solid; font-size: 24px; color: #F00; position: absolute; top: 280px; left: 380px; } #ad2{ position: fixed; top: 350px; left: 1000px; } </style>
    
    
    	<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
    	<title>22</title>
    </head>
    
    <body>
    	<div class="one"> one</div>
    	<div class="two"> two</div>
    	<div class="three"> three</div>
    	<div id="ad">
    		<marquee scrollamount="30"> 广告</marquee>
    	</div>
    	<div id="ad2">
    		<img src="/Users/jc/Desktop/15110529867346495.jpg" />
    	</div>
    </body>

网页综合结果如下:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05ld2JpZV9K_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05ld2JpZV9K_size_16_color_FFFFFF_t_70]: /images/20220301/7a3989dc3de7499bb7ed5ea4b840112d.png