css层叠样式表基础学习笔记--第一章 css简介及引入

第一章 css简介及引入

1-01 css简介
1-02 css优缺点
1-03 css书写格式
1-04 css引入格式
- 行内样式
- 内部样式
- 外部样式
- 导入样式
1-05 css注释

1-01 css简介

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>css简介</title></head><body>html:用来搭建网页结构css:用来给网页添加样式css3:是css最新的版本</body>
</html>

1-02 css优缺点

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">div,p{color: red;font-size: 24px;font-weight: 600;}</style></head><body><!--单行注释的快捷键是：ctrl+/--><!--css: 层叠样式表，给网页添加样式--><!--css优点：--><!--1.丰富的样式描述--><!--<div style="color: red;font-size: 24px;font-weight: 600;">我要自学网</div>--><!--2.实现了结构和样式的分离，便于维护和管理--><!--3.大大减少代码量。加快页面加载速度--><!--4.样式代码的复用性强--><!--5.多个页面可以使用同一个css样式表--><!--css的缺点--><!--1.功能多，学习的知识就多--><!--2.浏览器对css支持程度不一样--><div style="width: 200px;height: 200px;background: blue;border-radius: 50%;">我要自学网</div><p >我要自学网2</p><div >我要自学网3</div><p >我要自学网4</p></body>
</html>

1-03 css书写格式

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--css书写：--><!--1.属性名：属性值--><!--2.属性值是对属性的相关描述,不要乱写属性值--><!--3.属性名必须是一个合法的标识符--><!--注意:--><!--1.css不用区分大小写,但是推荐使用小写--><!--2.样式和样式之间要用";"隔开--><!--常用的样式设置--><!--文字颜色:--><!--color:合法的颜色值;--><!--文字大小:--><!--font-size:合法的尺寸单位;--><!--文字加粗:--><!--font-weight:600--><!--尺寸样式--><!--宽度设置  width:合法的尺寸单位;--><!--高度设置  height:合法的尺寸单位;-->      <div id="wyzx" style="color: red;font-size: 20px;">我要自学网</div></body>
</html>

1-04 css引入格式

行内样式

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>行内样式</title></head><body><!--css引入方式:--><!--1.行内样式:将css代码写在元素开始标签的style属性中可以设置多个样式,需要使用';'隔开--><div style="color: red;font-size: 30px;">我要自学网</div></body>
</html>

内部样式

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>内部样式</title><style type="text/css">div{color: red;font-size: 30px;}</style></head><body><!--css引入方式:--><!--1.行内样式:将css代码写在元素开始标签的style属性中可以设置多个样式,需要使用';'隔开--><!--2.内部样式:在当前网页的head标签中,写上一对style标签,然后在style标签中,使用选择器编写css代码--><div >我要自学网</div></body>
</html>

外部样式

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>外部样式</title><link rel="stylesheet" href="03-css.css" /><link rel="stylesheet" type="text/css" href="03-css1.css" /></head><body><!--css引入方式:--><!--1.行内样式:将css代码写在元素开始标签的style属性中可以设置多个样式,需要使用';'隔开--><!--2.内部样式:在当前网页的head标签中,写上一对style标签,然后在style标签中,使用选择器编写css代码--><!--3.外部样式:需要一个单独的css文件书写css样式在head标签中使用link标签把单独的css文件关联起来在同一个页面可以引入多个css文件是使用最多的方式--><div >我要自学网</div></body>
</html>

导入样式

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>导入样式</title><link rel="stylesheet" href="03-css.css" /></head><body><!--css引入方式:--><!--1.行内样式:将css代码写在元素开始标签的style属性中可以设置多个样式,需要使用';'隔开--><!--2.内部样式:在当前网页的head标签中,写上一对style标签,然后在style标签中,使用选择器编写css代码--><!--3.外部样式:需要一个单独的css文件书写css样式在head标签中使用link标签把单独的css文件关联起来在同一个页面可以引入多个css文件是使用最多的方式--><!--4.导入样式把一个css文件通过@import url("要导入的css文件路径");导入到另一个css文件中;使用导入样式,会先加载html,再加载css,会造成页面样式延迟不常用,也不建议使用--><div >我要自学网</div></body>
</html>

1-05 css注释

/*css注释:*//*1.合理使用注释可以使代码更清晰,更易修改*/
/*css注释快捷键:ctrl+/*//*头部开始*/
header{}/*导航开始*/header nav{}/*导航结束*/
/*头部结束*//*主题内容开始*/
.content{}
/*主题内容结束*//*尾部开始*/
footer{}
/*尾部结束*/

css层叠样式表基础学习笔记--第一章 css简介及引入相关推荐

css层叠样式表基础学习笔记--第十二章我要自学网首页实战
第十二章我要自学网首页实战 12-01 页面分析 12-02 工作准备 12-03 搜索区块页面结构 12-04 导航条布局 12-05 幻灯片布局 12-06 公告栏布局 12-07 远程培训班布 ...
css层叠样式表基础学习笔记--第五章文本属性
第五章文本属性 5-01 字间距 5-02 行高 5-03 首行缩进 5-04 水平排列方式 5-05 垂直对齐方式 5-06 文本修饰 5-07 文本阴影 5-08 文本属性重置 5-01 字间距 ...
《Go语言圣经》学习笔记第一章 Go语言入门
Go语言圣经学习笔记第一章 Go语言入门目录 Hello, World 命令行参数查找重复的行 GIF动画获取URL 并发获取多个URL Web服务本章要点注:学习<Go语言圣经&g ...
编译原理（龙书）学习笔记第一章
编译原理(龙书)学习笔记第一章 1.1语言处理器解释器(interpreter) : 编译器(compiler): 一个语言处理系统练习 1.1.1:编译器和解释器之间的区别 1.1.2:相对优 ...
小吴的《机器学习周志华》学习笔记第一章绪论
小吴的<机器学习周志华>学习笔记第一章绪论近一年时间接触到不少机器学习的知识,虽然断断续续学了一些,总感觉还没有入门(只学会了疯狂调包).因此,最近开始系统学习Machine Le ...
计算机网络学习笔记---第一章
计算机网络学习笔记第一章文章目录计算机网络学习笔记第一章前言一.计算机网络的概念 (一)计算机网络的功能 1.数据通信(连通性) 2.资源共享(硬件软件数据) 3.分布式处理 (Had ...
机器人导论（第四版）学习笔记——第一章
机器人学导论(第四版)学习笔记--第一章 1. 概述 1.1 背景 1.2 操作臂力学和控制 1.3 符号 1. 概述 1.1 背景工业自动化的发展带来了工业机器人的高速发展.本书聚焦机械臂的力学和 ...
PhalAPI学习笔记 ——— 第一章自定义HelloWorld接口
PhalAPI学习笔记 --- 第一章自定义HelloWorld接口前言自定义接口项目实例结果分布解析结束语前言公司业务需要转学PHP,而PHP中一个功能强大且生态链完整的PHP接口框 ...
日语课程0基础学习笔记——第一课
学习目标: 编程0基础学习笔记--前言这是一个个人使用的日语学习记录博客!根据B站的up日语教程一直跟下来,从第一天开始记录.后续会把我学习的内容和知识点尽量多的记录在这个博客中,不仅是方便自己复习 ...

css层叠样式表基础学习笔记--第一章 css简介及引入

第一章 css简介及引入

1-01 css简介

1-02 css优缺点

1-03 css书写格式

1-04 css引入格式

行内样式

内部样式

外部样式

导入样式

1-05 css注释

css层叠样式表基础学习笔记--第一章 css简介及引入相关推荐

最新文章

热门文章