CSS样式详解-优快云博客

本文链接：https://blog.youkuaiyun.com/Azadoo/article/details/105598508

1、为什么需要css
问题1、
HTML的作用是负责数据的格式化的展示的。
如果使用HTML来进行数据的样式，则发现样式书写起来太过于麻烦，不易于维护不能够重复的使用
问题2、
HTML可以有效的组织数据的展示，但是不同类型数据在浏览器中的分布没有办法实现。
为了上面的问题诞生了css语言，专门用来给网页进行样式开发。
2、什么是css
css的概念:层叠样式表
作用:给网页进行样式的开发。给网页进行布局。
特点:语言特别简单开发的样式可以重复使用依赖html
3、使用css
css的声明
css的选择器
css的常用样式
css的盒子模式
css的定位
css的布局

4.声明css
1、在head标签中使用S tyle标签声明:
作用:此声明一般声明当前网页的公共样式或者给某个标签的单独样式
2、在标签上使用styLe属性进行声明:
作用:此声明会将CSS样式直接作用于当前标签。
3、在head标签中使用L ink标签引入外部声明好的css文件
作用:此声明相当于调用，解决了不同网页间样式重复使用的问题一次声明，随处使用

代码如下

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<style type = "text/css">
		hr{
			width: 50%;
			height: 80px;
			color: red;
			background-color: blue;
		}
	</style>
	<link rel="stylesheet" type="text/css" href="css/my.css"/>//引用css文件
</head>
<body>
		<div align=""center>
			<h3>SUCCES</h3>
			</div>
			<hr style="background-color: red;"/>//两个同样的hr选定原则：html中哪个离得近为哪个
</body>
</html>

css文件

@charset "UTF-8";
hr{
			width: 50%;
			height: 80px;
			color: red;
			background-color: blue;
		}

Css