锐单电子商城 ， 一站式电子元器件采购平台！

  • 电话：400-990-0325

购物车

【Web前端】——CSS基础知识总结

时间：2023-01-02 09:30:00 聚丙烯膜介质电容器cbb80b

在这里插入图片描述

?? 作者: 阿伟
?? 个人主页: Flyme awei

?? 希望大家多支持一起进步！

?? 文章对你有帮助，关注和赞美收藏

前端技术之CSS

文章目录

前言

??HTML可以让我们实现静态页面效果，但页面没有酷好看的效果，通过CSS该技术可以装饰静态页面，使页面更加美观。

一、CSS的引入

1.为什么要学习？CSS？

（HTML画页面)这个页面列出了页面上需要的元素，但是页面效果很差，不好看。为了让页面好看，为了修改页面，引入CSS。

1.2CSS的作用

修饰HTML页面
用了CSS之后，样式和元素本身就分开了。(降低代码耦合)

1.3HTML和CSS的关系？

先有HTML，先有页面，CSS修饰页面

1.4CSS名字

CSS：cascading style sheets (层叠样式表)

层叠：风格叠加
风格表：各种风格的集合

二、CSS三种写作方式

2.1内联样式

DOCTYPE html> <html>  <head>   <meta charset="UTF-8">   <title>css内联样式title>  head>  <body>     <h1 style="color: deeppink; font: '微软雅黑';">CSS内联样式h1> body> html>

2.2内部样式

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css内部样式title>
		
		<style type="text/css"> h1{ 
          font: "微软雅黑";color: aqua;} style>
	head>
	<body>
		<h1>css内部样式h1>
	body>
html>

2.3外部样式

首先要创建一个css文件，css文件的后缀.css

h1{ 
        
	color: red;
	font-family: "宋体";
}

再创建html页面：

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		
		<link rel="stylesheet" href="css/css外部样式.css" />
	head>
	<body>
		<h1>css外部样式h1>
	body>
html>

实际开发中三种书写方式用的最多的是：外部样式：因为这种方式真正做到了 元素页面和样式 分离

2.4三种书写方式优先级

就近原则

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		
		<link rel="stylesheet" href="css/css外部样式.css" />
		
		<style type="text/css">h1{ 
          color: coral;}style>
	head>
	<body>
		
		<h1 style="color: darkorchid;font-family: '微软雅黑';">css的书写方式h1>
	body>
html>

三、学习CSS的重点

css的作用：修饰页面上的元素
利用选择器定位页面上要修饰的元素

四、基本选择器

4.1元素选择器

通过元素的名字进行定位，，他会获取页面上所有这个元素
格式:
元素名{css样式;}

4.2类选择器

应用场合：不同的类型标签使用相同的类型
格式:
.clss的名字{css样式；}

4.3id选择器

应用场合，可以定位唯一的元素
不同的标签确实可以使用相同的id，但是一般会进行人为的控制，让id可以是唯一定位到一个元素
格式：
#id名字{css样式}

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css"> /* 【1】基本选择器：元素选择器 通过元素的名字进行定位，，他会获取页面上所有这个元素 格式； 元素名{css样式;} * */ h1{ 
          color: #00FFFF;} h2{ 
          color: chartreuse;} i{ 
          color: #FF7F50;font: "微软雅黑";} /* 【2】基本选择器：类选择器 应用场合：不同的类型标签使用相同的类型 格式： .clss的名字{css样式；} * */ .mycls{ 
          color: #FF7F50;} /* 【3】id选择器 应用场合，可以定位唯一的元素 不同的标签确实可以使用相同的id，但是一般会进行人为的控制，让id可以是唯一定位到一个元素 格式： #id名字{css样式} * */ #myid{ 
          color: blueviolet;} style>
	head>
	<body>
		<h1>css基本选择器h1>
		<h1>这是<i>一个h1i>标题h1>
		<h1>这是一个h1标题h1>
		<h1 class="mycls">这是一个h1标题h1>
		<h2>这是一个h2标题h2>
		<h2 id="myid">这是一个h2标题h2>
		<h2 class="mycls">这是一个h2标题h2>	
	body>
html>

4.4基本选择器优先级

id选择器>class选择器>元素选择器

五、关系选择器

5.1 div 和 span

可以把div理解为一个框
div叫做块级元素，有换行效果	 
span属于行内元素，没有换行效果
span：里面内容占多大，span包裹的区域就有多大

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css"> /* 可以把div理解为一个框 div叫做块级元素，有换行效果 span属于行内元素，没有换行效果 span：里面内容占多大，span包裹的区域就有多大 * */ div{ 
          border: 1px red solid;} span{ 
          border: 1px darkmagenta solid;} style>
	head>
	<body>
		<div>关系选择器div>
		<div>关系选择器div>
		<span>选择器span>
		<span>选择器span>
		<span>关系选择器span>
	body>
html>

div和span 结合css用于页面的布局。div+css 用于页面布局。

5.2关系选择器

关系选择器
后代选择器：只要是这个元素的后代，样式都会发生变化
div下面的所有h1标签都会发生变化
子代选择器

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css"> /*关系选择器 后代选择器：只要是这个元素的后代，样式都会发生变化 div下面的所有h1标签都会发生变化 * */ div h1{ 
          color: #00FFFF;} /*子代选择器*/ div>h1{ 
          color: #8A2BE2;} style>
	head>
	<body>
		<div>
			<h1>关系选择器h1>
			<h1>关系选择器h1>
			<span>
				<h1>关系选择器h1>
				<h1>关系选择器h1>
			span>
		div>
	body>
html>

六、属性选择器

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css"> /*属性选择器*/ input[type="password"]{ 
           color: #00FFFF;background-color: cadetblue; } input[type="text"]{ 
           background-color: cyan; } style>
	head>
	<body>
		<form>
			用户名<input type="text" value="Flyme awei"/><br />
			密 码<input type="password" value="123123"/>
			<input type="submit" value="登录"/>
		form>
	body>
html>

七、伪类选择器

伪类选择器 向某些选择器添加特殊效果。

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css"> /* 伪类选择器: 鼠标悬浮在上面才变色*/ h1:hover{ 
          color: #00FFFF;} style>
	head>
	<body>
		<h1>伪类选择器h1>
	body>
html>

一般用在超链接上

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css"> /*设置静止状态*/ a:link{ 
          color: black;} /*设置鼠标悬浮状态*/ a:hover{ 
          color: red;} /*设置触发状态*/ a:active{ 
          color: blue;} /*设置完成状态*/ a:visited{ 
          color: green;} style>
	head>
	<body>
		<h1><a href="index.html" target="_blank">超链接a>h1>
	body>
html>

八、练习百度导航栏


代码：

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		<style type="text/css"> /*取消无序列表前的图标*/ ul{ 
          list-style-type: none;} /*设置鼠标悬浮效果*/ a:hover{ 
          color: deepskyblue;} /*设置静止状态 去除下划线*/ a:link{ 
           color: black; text-decoration: none; font: 13px; } li{ 
           float: left; /*向左浮动*/ margin-left: 15px;} /*设置间隔15px*/ style>
	head>
	<body>
		<ul>
			<li><a href="http://news.baidu.com/" target="_blank">新闻a>li>
			<li><a href="" target="_blank">hao123a>li>
			<li><a href="" target="_blank">地图a>li>
			<li><a href="" target="_blank">贴吧a>li>
			<li><a href="" target="_blank">视屏a>li>
			<li><a href="" target="_blank">图片a>li>
			<li><a href="" target="_blank">网盘a>li>
			<li><a href="" target="_blank">更多

相关文章