2021-06-03

IDACW

于 2021-06-03 15:45:56 发布

阅读量87

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/IDACW/article/details/117520334

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、CSS（Cascading Style Sheets，层叠样式表）
1.CSS的位置
(1)内联样式(一般不使用)

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
  <p style="color:red;">今天是2021年6月3日</p>
 </body>
</html>

(2)内部样式(只适用于当前页面)
在<head>中定义一个<style>（不支持HTML）

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
	h1{
		color:red;
		font-size:30px
	 }
  </style>
 </head>
 <body>
<h1>2021.6.3</h1>
 </body>
</html>

(3)外部样式，在页面中通过<link>引入

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>外部样式</title>
  <style>
  </style>
  	<link rel="styleSheet" href="外部样式.css">
 </head>
 <body>
	<h3>外部样式</h3>
 </body>
</html>

h3{color:green}

   2.CSS的单位：像素
   3.CSS的语法格式：
       选择器{属性:属性值;属性:属性值;...}
   4.选择器
       (1)元素选择器：通过元素名选择

h1{
		color:red;
		font-size:30px
	 }

(2)ID选择器：只能在元素中唯一命名，ID不能重复

<p id="one">ID选择器</p>

#one{
		background:aqua;
	 }

(3)类选择器（使用频繁）：类名可以重复，通过.类名选中，一个元素中可使用多个类名（用空格隔开）

<p class="three">类选择器</p>

.three{
		background:red;
	 }

       (4)伪类选择器：
           （伪类，一种特殊的类，表示元素的特殊状态，点击时效果、鼠标引入时效果）
               :first-child————同类元素中的第一个元素
               :last-child————同类元素中的最后一个元素
               :nth-child————选中列表中同类元素中第n个指定元素

<ul>
		<li>第一行</li>
		<li id="first">第二行</li>
		<li>第三行</li>
		<li id="last">第四行</li>
	</ul>

li:first-child{
		color:red;
	 }
	 li:last-child{
		color:green
	 }
	 li:nth-child(1){
		color:yellow
	 }

           超链接的伪类
               :link————选择所有未被访问的链接。
               :visited————选择所有已访问的链接。
               :hover————选择鼠标悬停其上的链接。
               :active————选择活动的链接。

<a href="https://www.baidu.com">访问过的链接</a>
	<a href="https://www.baidu123.com">还未访问过的链接</a>

a{font-size:50px}
	 /*未访问，<a>独有*/
	 a:link{color:red}
	 /*访问过，<a>独有，一般不会修改访问过的链接*/
	 a:visited{color:green}
	 /*鼠标光标效果*/
	 a:hover{font-size:200px}
	 /*鼠标点击时效果*/
	 a:active{background-color:green}

5.选择器优先级
内联>id>class>元素

IDACW

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-06-03

一、CSS（CascadingStyleSheets，层叠样式表） 1.CSS的位置 (1)内联样式(一般不使用)<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content="">...
复制链接

扫一扫