1、什么是CSS
CSS指的是层叠样式表(Cascading Style Sheet)
2、CSS作用
美化网页,类似人穿上新的衣服
3、CSS的优势
1)、内容与表现分离
2)、网页的表现统一,容易修改
3)、丰富的样式,使页面布局更加灵活
4)、减少网页的代码量,增加网页的浏览速度,节省网络带宽
5)、运用独立于页面的CSS,有利于网页被搜索引擎收录
4、CSS语法规则
选择器{ 声明1;
声明2;
声明3;
}
例: h1{
font-size:12px;
color;red;
}
声明由属性和属性值组成
5、选择器
(1)标签选择器:选择器写法和标签是一致的。作用范围:在该页面中所有的这些标签会使用统一的样式。
如果有个别某些h1不想使用这个样式怎么办? 肯定不能使用h1这个标签选择器
如果有些段落p也不想使用h1的那个样式怎么办?
(2)类选择器:相比于标签选择器好处在于不同标签可以使用同一样式,可以用姓名来类比
.类名{
属性:值;
}
例:
.color{
color:red
}
<h1></h1>
<p class="color"></p>
(3)ID选择器:与类选择器相比,类选择器只要定义了该类则可以使用其样式,而ID选择器只能有唯一一个,可以用身份证号码来类比。某一个特定的标签专属的样式
#id名{ 这里id名就改为”id1”
Color:red;
}
<h1 id=”id1”></h1>
CSS注释 /*...*/与html注释<!--...-->不同
6、颜色
1、英文单词:red、yellow等
2、使用十六进制数字表示 0-9 A-F
例子:color:#ff0000;
一共有6位,2位为1份,共3份
RGB red green blue
头两位的"ff"表示十六进制最高代表红色,中间2位"00"表示无绿色
末两位的"00"表示无蓝色,结合起来就是红色
7、CSS怎么用?
(1)内部样式表:应用在head标签内
<style>
h1{
color:red;
}
</style>
(2)内联样式:直接在HTML标签中设置的样式,作用在特定的某一个标签
<h1 style="color:red"></h1>
(3)外部样式表:
方法1-链接式:
先创建一个外部的CSS文件:*.css,把样式写在这个文件中,然后在*.html中引入css样式。在head标签中,通过"<link rel="stylesheet" href="" style="text/css">"
stylesheet指一个样式表,href指样式文件的路径,style指文件的类型
方法2-导入式:
在head标签中写入我新建的mystyle.css样式
<style>
@import “css/mystyle.css”
</style>
链接式与导入式的区别
1、<link/>标签属于XHTML,@import是属于CSS2.1
2、使用<link/>链接的CSS文件先加载到网页当中,在进行编译显示
3、使用@import导入的CSS文件,客户端显示HTML结构,再把CSS文件加载到网页当中
4、@import是属于CSS2.1特有的,对于不兼容CSS2.1的浏览器来说是无效的
第2和第3点的差别在于网速,当网速慢时对于第3点来说先显示的一个框架,CSS文件导入的慢,因此样式可能在稍后呈现出来,效果不美观,体验就不好。而对于第2点是加载完样式才呈现出效果出来,就算网速慢,它还是呈现出样式出来,体验好
综上,所以建议使用链接式
8、内部样式 外部样式 内联样式同时作用在一个标签中,哪个优先级最高?当同一个标签使用不同选择器,样式不同,哪个优先级更高呢?
优先级问题:
ID选择器>类选择器>标签选择器
内联样式>内部样式>外部样式 (就近选择)
9、如何编写自己的样式声明
学习方法
查看w3cshool手册,定位到CSS
字体
文本
超链接
背景
列表
10、文本在网页中的作用
1、传递页面信息
2、美化页面文本
3、页面美观漂亮
4、突出主题
5、吸引用户
6、增强用户体验
11、字体样式
属性 含义 实例
font-family 设置字体类型 font-family:"隶书";
font-size 设置字体大小 font-size:12px;
font-style 设置字体风格 font-style:italic; /*斜体*/
font-weight 设置字体粗细 font-weight:bold;
font 在一个生命中设置所有字体属性 font:italic bold 36px "宋体";
12、常见问题及错误
(1)CSS文件中设置的中文字体类型不起作用,怎么解决?
CSS文件编码重新设置为utf-8即可
(2)如果页面中既有中文又有英文,怎么修饰字体类型?
首先这些字体格式必须是系统有的,可以打开word文档看看是否有这些格式。网页中既有中文又有英文,我想给他们不同的样式,如中文是微软雅黑,英文cursive,那么就可以写成font-family:cursive,"微软雅黑";这句就会使得中文字体显示微软雅黑,英文字体显示cursive。
注意:英文字体类型要写在中文字体类型前面
例:css body{
font-family:"微软雅黑";
}
html 这是一首诗<br/>
this is a poem!