CSS

最新推荐文章于 2024-08-31 21:18:22 发布

乀太空旅客

最新推荐文章于 2024-08-31 21:18:22 发布

阅读量158

点赞数

CC 4.0 BY-SA版权

文章标签： CSS

本文链接：https://blog.youkuaiyun.com/weixin_43917392/article/details/85764987

CSS

1、CSS的概述

A.CSS的含义：
	"层叠样式表"

B.CSS的作用:
	a.美化HTML页面
	b.解耦合,将HTML和CSS部分分离开来,多个程序员分工协作.一个写HTML.另一个写CSS
	c.可以拓展HTML的标签的功能,例如:之前的字体大小有上限,使用CSS无上限。

C.三种静态网页技术的含义
	a.HTML : 用于写HTML标签。例如: 建房子的毛坯房就是HTML
	b.CSS  ：用于美化HTML界面。例如: 房子需要装修。
	c.JavaScript ： 用于制作特效,校验表格等效果。例如：房子的特效。智能家电，智能家居

2、CSS引入的三种方式

a.内联样式

a.作用域:
	在当前的标签上面

b.格式:
	<font style="font-size: 88px;color: #FF9900"> 你是真的不错！心有多大,字有多大 </font>

b.内部样式

a.作用域:
	在当前的HTML页面上面

b.格式:
	<head>
		<meta charset="UTF-8">
		<title>CSS入门</title>
		<style type="text/css">
			font{
				font-size: 66px;
				color: #0000FF
			}
		</style>
	</head>
	<body>
		<font style="font-size: 88px;color: #FF9900"> 你是真的不错！心有多大,字有多大 </font>
		<br><br>
		<font> 牛逼啊 </font>
		<br><br>
		<font> 我的哥 </font>
	</body>

c.外部样式

a.作用域: 
	只要你引入了外部样式,整个页面都可以使用.(需要在外部新建CSS文件)

b.格式:
	<!-- HTML 代码 -->
	<head>
		<meta charset="UTF-8">
		<title>CSS入门</title>
		<link rel="stylesheet" href="css/a.css">
	</head>
	<body>
		<font> 牛逼啊 </font>
		<br><br>
		<font> 我的哥</font>
	</body>
	<!-- CSS 代码 -->	
	font{
		font-size: 44px;
		color: #FF0000
	}

3、三种基本的选择器

A.ID选择器
	a.含义:
		(单独针对于某个HTML标签)"在一个HTML当中id要唯一"
	b.语法: 
		#id的名称{}

B.类选择器
	a.含义:
		(设置同一个类的,可以是不同的标签类型)
	b.语法:
		.class的名称{ }

C.元素选择器(设置的是同一类的标签)
		div{}

4、常见属性

border: #FF9900 1px solid;  /*设置边框*/
height: 120px;/*设置高度*/
width: 480px;/*设置宽度*/
float: left;  /*浮动,脱离原始文档流*/
text-align:center; /*内容居中*/
line-height:80px;/*行高*/
font-size: x-large; /*字体的大小large大字体(想一想衣服的尺码) */
color: #0000FF;/*设置颜色*/

5、盒子模型

A.外边距: margin 左上右下
B.内边距: padding 左上右下
	注意事项:
		内边距会影响原始的尺寸大小
		可以设置 *{ box-sizing: border-box;}  /*忽略边框不计算*/