范仁义css3课程---1、认识css样式
范仁义css3课程---1、认识css样式
一、总结
一句话总结：
知道css在网页制作中扮演的角色，知道css是什么，掌握css代码的语法
1、css是什么？
CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
2、使用css有哪些好处？
将css代码与html代码分离，更好的操作、管理以及复用
通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。
3、css代码语法？
语法：选择符{属性:值}
实例：p{color:red;}
4、css中设置字体大小用什么属性？
用font-size属性：例如 font-size:12px;
5、css中设置字体颜色用什么属性？
用color属性：例如 color:red;
6、写css代码需要注意什么？
1、写css的时候，标点符号都是英文状态下的标点符号
2、属性和值之间用英文状态下的冒号（:），不同属性之间用英文状态下的分号（;）
二、认识css样式
博客对应课程的视频位置：1、认识css样式
https://www.fanrenyi.com/video/10/28
1、回顾html，css，js在网页制作中扮演的角色
1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
2、认识css样式
CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
层叠的意思：一个标签应用的同一种样式（比如设置字体）可能有多个，以权值最高的且最近的样式为准
css3是css的最新的版本号，里面新加了一些功能，比如动画、3d转换等
如下列代码：
p{
font-size:12px;
color:red;
font-weight:bold;
}
使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。
3、使用css的好处
将css代码与html代码分离，更好的操作、管理以及复用
通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。
4、css代码语法
css 样式由选择符和声明组成，而声明又由属性和值组成
选择符{属性:值}
p{color:red;}
选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成红色，而其他的元素（如ol）不会受到影响。
声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：
p{font-size:12px;color:red;}
5、注意点
1、写css的时候，标点符号都是英文状态下的标点符号
2、属性和值之间用英文状态下的冒号（:），不同属性之间用英文状态下的分号（;）
三、课程代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>认识css样式</title> 6 <style> 7 p{ 8 font-size:12px; 9 color:green; 10 font-weight:bold; 11 } 12 </style> 13 </head> 14 <body> 15 <p style="color: red;">这是一个很帅很拉风的代表2020年会幸运的p标签</p> 16 <a href="">我是a标签</a> 17 <p>这是一个别致的p标签</p> 18 </body> 19 </html>
参考：
史上最全的HTML、CSS知识点总结，浅显易懂。_HTML,CSS,Javaweb_编程小石头-CSDN博客
https://blog.csdn.net/qiushi_1990/article/details/40260447
菜鸟学院：css、css3手册：https://www.runoob.com/css/css-tutorial.html
浙公网安备 33010602011771号