标签：标签 下载 简单的 styles link port 优先级 维护 文字
一.什么是CSS
CSS全称 Cascading Style Sheet 层叠样式表,它是用来美化页面的一种语言..
它属于W3C 内容、表现、行为三者分离中的 "表现".如果我们想调整文字大小、
让表格隔行换色、调整超链接的样式、调整文本框宽度等需要使用到CSS技术.
另外CSS除了用来美化页面以外,还可以和DIV技术连用 实现网页的布局..
作用:
1. 美化页面
2. 页面布局
***********************永远的HelloWorld*****************************
需求: 让段落标签中的文字 黑底白字、30像素
<p style="background-color:#000000;color:#ffffff;font-size:30px">Hello,CSS!</p>
**************************CSS样式规则******************************
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
例如:
background-color:#000000;
color:#ffffff;
font-size:30px
**************************CSS语法************************************
选择器 {
样式规则
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
}
选择器: 是用来选择标签的,选出来以后给标签加样式
生活中的选择器:
1. 全班同学
2. 吕梁学院的同学
3. 全体男生
4. 第一排的女生
5. 经常睡觉的同学..
**************************如何引入CSS************************************
一.行内样式
直接给标签加style属性 这种方式叫做行内样式
<p style="background-color:#000000;color:#ffffff;font-size:30px">Hello,CSS!</p>
最简单的方式
缺点:
1. 内容、表现、行为三者分离
代码很乱 不好维护
2. 代码冗余 不可复用
如果页面中有多个p标签 多个p标签都使用相同的 "黑底白字、30像素"样式
同样的样式需要写多份 不可复用
二.内嵌样式
<head>
<style type="text/css">
p {
background-color:#000000;
color:#ffffff;
font-size:30px
}
</style>
</head>
内嵌样式解决了同一个页面中多个标签 复用样式的问题,但是如果多个页面中
使用相同的样式,还是代码冗余,这时需要使用链接样式
三.链接样式(链入式)
推荐
在head中加入以下代码
<link href="../css/my.css" type="text/css" rel="stylesheet"/>
虽然解决多页面复用问题 但是每个文件浏览器都要单独下载 比较慢 如果追求访问速度 内嵌样式最快(只需要下载这个a.html页面一个
文件即可)
四.导入样式
在head中加入以下代码
<style type="text/css">
@import url("../css/my.css");
</style>
*******************************优先级******************************
如果4种导入方式同时使用,都生效,如果碰到相同的属性 都修改了文字的颜色
后定义者优先(就近原则)
如果定义多个style标签,多个style标签都起作用...
注意: 如果把内嵌样式和导入样式放在一个style中,永远是内嵌样式起作用....
标签：标签 下载 简单的 styles link port 优先级 维护 文字
原文地址：https://www.cnblogs.com/MrTanJunCai/p/9907550.html
