CSS学习—开始
来源:互联网 发布:python 文本文件 编辑:程序博客网 时间:2024/06/14 11:02
最近做的小项目需要搭建一个小网站,因此从慕课网 上学习HTML+CSS的基础知识,接触到的知识点用这个博客总结出来。
CSS的概念: CSS全称为层叠样式表 (Cascading Style Sheets),它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。
使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字有着统一的字体、字号或者颜色等。
代码示例:
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>认识CSS样式</title><style type="text/css">p{ font-size:17px;/*设置文字字号*/ color:red;/*设置文字颜色*/ font-weight:bold;/*设置字体加粗*/}</style></head><body><p>维德说:“未来的技术进步现在已成为不确定的事情,如果人类在太空中一直是蜗牛的速度,那我们就应该尽早开始爬。”</p></body></html>
举例:修改字体颜色
- 把要修改颜色的字段用< span>< /span>括起来;
- 写入如下代码: span { color:red; } .
示例代码: (观察上文的代码,注意css代码出现的位置!)
<style type="text/css">span{ color:blue;}</style></head><body> <p>“我们去哪儿?”程心喃喃地问道。 “<span>去找他们</span>。”罗辑说,这时他的图像更加模糊,而且变成了黑白的。 这话像闪电般照亮了程心黑色的思绪,她和 AA 对视了一眼,她们当然明白<span>“他们”</span>的含意。 罗辑接着说:“他们还在,五年前掩体世界收到了他们发出的<span>引力波</span>信息,很简短的信息,不知道他们在哪儿。‘星环’号在航行时会定期发出呼叫他们的引力波信号,也许你们能找到他们,或者他们找到你们。”</p></body>
运行截图:
CSS代码语法: css 样式由选择符和声明组成,而声明又由属性和值组成
当有多条声明时,中间可以用英文分号“;”分隔,最后一条声明可以没有分号,但是为了以后修改方便,一般也加上分号。同时为了使用样式更加容易阅读,可以将每条代码写在一个新行内。
CSS注释代码:用/* 注释语句*/来标明(Html中使用< !–注释语句–>)。
CSS样式:
1.内联式:把css代码直接写在现有的HTML标签中,注意要写在元素的开始标签里,并且css样式代码要写在style=”“双引号中,如果有多条css样式代码设置可以写在一起,中间用分号隔开。
如:< p style=”color:red;font-size:12px”>这里文字是红色< /p>
2.嵌入式:把css样式代码写在< style type=”text/css”>< /style>标签之间(本文一开始的例子)。
<style type="text/css">span{ color:blue;}</style></head><body> ......</body>
3.外部式:外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在< head>内(不是在< style>标签内)使用< link>标签将css样式文件链接到HTML文件内。
语法:< link href=”base.css” rel=”stylesheet” type=”text/css” />
PS:
- css样式文件名称以有意义的英文字母命名,如 main.css;
- rel=”stylesheet” type=”text/css” 是固定写法不可修改;
- < link>标签位置一般写在< head>标签之内 .
示例代码:
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>嵌入式css样式</title><link href="style.css" rel="stylesheet" type="text/css" /></head><body> <p>“我们去哪儿?”程心喃喃地问道。 “<span>去找他们</span>。”罗辑说,这时他的图像更加模糊,而且变成了黑白的。 这话像闪电般照亮了程心黑色的思绪,她和 AA 对视了一眼,她们当然明白<span>“他们”</span>的含意。 罗辑接着说:“他们还在,五年前掩体世界收到了他们发出的<span>引力波</span>信息,很简短的信息,不知道他们在哪儿。‘星环’号在航行时会定期发出呼叫他们的引力波信号,也许你们能找到他们,或者他们找到你们。”</p></body></html>
至此,CSS初始阶段的基本知识的学习告一段落。
————————————————————————————10:58am,2017.7.1 于a区三楼
- CSS学习—开始
- 今天开始学习CSS
- 学习HTML(十二)——开始接触CSS
- 学习HTML(十三)——开始编写CSS
- 开始学习CSS,为网页添加样式
- 【CSS笔记一】开始学习CSS,为网页添加样式
- —> 开始学习linux
- 第 1 章 开始学习 CSS,为网页添加样式
- Torch学习——开始
- Java学习—开始篇
- 开始学习
- 开始学习
- 开始学习
- 开始学习
- 开始学习
- 开始学习
- 开始学习
- 学习开始
- SQL Server 中间件
- Java HotSpot VM Options
- 第十章 图像分割
- [LeetCode] 98. Validate Binary Search Tree
- python virtualenvwrapper
- CSS学习—开始
- <NOIP> 10 . P1423 小玉在游泳
- Java类和对象初始化
- crond和crontab调研
- 从c++到java+android
- python3.5+wordcloud生成词云
- Kubernetes之kubectl常用命令使用指南:3:故障对应
- hibernate中save,update,saveOrUpdate的用法和区别
- 一个教大家怎么挣两千万的故事!