CSS总结

目录

      • 1.CSS概述
      • 2.CSS语法
      • 3.CSS三种写法
        • 行内样式
        • 内部样式
        • 外部引入
      • 4.CSS选择器
        • 选择器语法
        • 通用选择器
        • 标签选择器/元素选择器
        • 类选择器
        • ID选择器

1.CSS概述

1.CSS是(Cascading Style Sheets)层叠样式表
2.网页设计者使用CSS可以定义元素的样式,直白的讲就是让网页更好看

2.CSS语法

单个样式写法:
<标签名 style=“样式属性:样式属性值;”>内容

<div style="background-color:red">我是行标签div>

多个样式写法:
<标签名 style=“样式属性1:属性值; 样式属性2:属性值;”>源代码教育

<div style="background-color:red; font-size:25px; text-align:center">我是行标签div>

3.CSS三种写法

行内样式

当前标签有效,尽量不使用

<标签名 style="样式属性:样式属性值;" >内容标签名>

内部样式

即包含的四类选择器写法

<html>
<head>
<meta charset="UTF-8">
<title> titletitle>
	<style type="text/css">
		*{
			background-color:red; font-size:25px; text-align:center
		}
	style>
head>
<body>
	<div>我是行标签1div>
	<div>我是行标签2div>
	<span>我是行内标签1span>
	<span>我是行内标签2span>
body>
html>

外部引入

在外部单独新建一个以.css为后缀的文件

@CHARSET "UTF-8";
.haha{
  background-color:pink;
  font-size: 25px;
  text-align: center
 }

然后使用<link>标签将这个CSS文件与需要样式的网页关联起来

DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
   <link rel="stylesheet"  href="./styles.css"> 
head>
<body>
	<div class="haha">我是div1div>
	<div >我是div2div>
	<span>我是sapn1span>
	<span >我是sapn2span>
body>
html>

4.CSS选择器

选择器语法

选择器名{
	样式属性1:样式属性值;
	样式属性2:样式属性值;
	……
}

通用选择器

匹配所有 一般我们不用 全局字体可能会用

*{
	样式
}
<html>
<head>
<meta charset="UTF-8">
<title> titletitle>
	<style type="text/css">
		*{
			background-color:red; font-size:25px; text-align:center
		}
	style>
head>
<body>
	<div>我是行标签1div>
	<div>我是行标签2div>
	<span>我是行内标签1span>
	<span>我是行内标签2span>
body>
html>

标签选择器/元素选择器

页面内所有同类型标签均生效

标签名{
	样式
}
<html>
<head>
<meta charset="UTF-8">
<title> titletitle>
	<style type="text/css">
		div{
			background-color:red; font-size:25px; text-align:center
		}
	style>
head>
<body>
	<div>我是行标签1div>
	<div>我是行标签2div>
	<span>我是行内标签1span>
	<span>我是行内标签2span>
body>
html>

类选择器

极力推荐使用的 可控性好

.class属性值{
	样式
}
<html>
<head>
<meta charset="UTF-8">
<title> titletitle>
	<style type="text/css">
		.aaa{
			background-color:red; font-size:25px; text-align:center
		}
	style>
head>
<body>
	<div class="aaa">我是行标签1div>
	<div>我是行标签2div>
	<span>我是行内标签1span>
	<span>我是行内标签2span>
body>
html>

ID选择器

坚决不用,页面内id不能重复,id一般结合js用

#id值{
	样式
}
<html>
<head>
<meta charset="UTF-8">
<title> titletitle>
	<style type="text/css">
		#a3{
			background-color:yellow; font-size:25px; text-align:center
		}
	style>
head>
<body>
	<div id="a3">我是行标签1div>
	<div>我是行标签2div>
	<span>我是行内标签1span>
	<span>我是行内标签2span>
body>
html>

你可能感兴趣的:(笔记总结,css,html,css3,前端)