文章目录

CSS简介
1、常用属性标签
- 1.1 Color 字体颜色
- 1.2 font-size 字号大小
- 1.3 font-family 字体
- 1.4 盒子三属性
2、样式表的使用
- 2.1 内嵌式
- 2.2 外链式
- 2.3 导入式（不重要）
- 2.4 四种样式的优缺点
- 2.5 关于样式的分离
3 Css选择器
- 3.1 标签选择器
- 3.2 id选择器
- 3.3 类名属性
- 3.4 通配符选择器
- 3.5 高级选择器后代选择器
- 3.6 高级选择器交集选择器
- 3.7 高级选择器并集选择器
4 CSS的继承性和层叠性
- 4.1 继承性
- 4.2 层叠性
- 总结
5 Firworks
- 5.1 缩放工具
- 5.2 抓手工具
- 5.2 灌管工具
- 5.3 文字工具
- 5.4 标尺辅助线
- 5.5 注意事项

CSS简介

Css有两个重要的概念：样式和布局
样式：文字样式，盒模型样式
Css的另一个重要的特性就是辅助页面布局，完成Html不能完成的功能，比如并排显示，比如精确定位

Html4.0开始，结构层和样式曾进行了分离

结构层：HTML作用是从语义的角度讲，搭建页面
样式层：CSS作用从美观的角度讲修饰页面
交互层：JavaScript作用从交互的角度描述页面的行为

1、常用属性标签

1.1 Color 字体颜色

颜色链接

<!-- css常用文字属性有是三个：color，font-size,font-famiy(字体)css的属性样式发生了改变：由HTML的 k='v' 变为  k:v;--><!-- 2.1颜色的属性属性名：color属性值：单词表示法：blue,red等    颜色值：十六进制，rgba需要记忆一些常用颜色的单词表示法的单词，比如red，blue，orange，pink          --><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><!-- 在标签内使用 --><p style="color:blue;">看看我是什么颜色</p><p style="color:   rgb(0,255,0);">看看我是什么颜色</p></body></html>

演示结果：

1.2 font-size 字号大小

<!-- 2.2 字号属性：font-size属性值：常用的是px为单位的数字值根据浏览器的不同，有不同的字号大小，比如Chrome和ie默认大小为16，ie最小字号为1px，Chrome为16px--><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p style="font-size: 16px;">16 看看我的大小</p><p style="font-size: 13px;">13 看看我的大小</p><p style="font-size: 8px;">8 看看我的大小</p><p style="font-size: 7px;">7 看看我的大小</p><p style="font-size: 6px;">6 看看我的大小</p><p style="font-size: 5px;">5 看最小字号为8</p>
</body>
</html>

演示结果：

1.3 font-family 字体

<!-- 属性：font-family属性值：必须以双引号包裹，属性值可以有多个，使用逗号分隔开中文字体的常用属性值：微软雅黑，宋体英文常用：Arial，consolas实际的字体属性是根据设计图获取的。如果输入的属性值不认识，默认加载微软雅黑如果页面中有中英文需要同时设置对应的字体，使用逗号隔开，如果浏览器不识别，会自动向后识别，中文和英文会分别进行加载--><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><p style="font-family:'宋体';">宋体</p><p style="font-family:'微软雅黑';">微软雅黑</p><p style="font-family:'Arial';">Arial</p><p style="font-family:'宋体','微软雅黑','Arial';">加载第一次识别的字体</p> <!-- 加载第一次识别的字体 --><!-- 按字体自动识别为宋体还是Arial，结果是中文只能识别宋体，英文只能识别Arial --><p style="font-family:'Arial','宋体';">宋体 Arial</p></body></html>

结果演示：

1.4 盒子三属性

 <!-- 盒子的三属性：width，height，background-colorwidth：宽度height：高度属性值都是以px为单位的数值background-color：属于background系列属性的一种，属于颜色系，分为：单词表示、颜色值表示--><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div style = "width:100px;height:100px;background-color: black;"></div></body></html>

结果演示：

2、样式表的使用

Css样式表1.行内式样式表：将style属性写在标签上，实现样式搭建基本语法：<div style = "width:100px;height:100px;background-color: black;"></div>引入位置：在标签的style属性中，等号后面的引号内书写Css样式，多个属性用分号分隔2.内嵌式样式表：书写位置在head标签内title标签的下面3.外链式样式表：书写位置在head标签的内部，title标签的下面，一个link内部去进行css文件引入link标签的作用就是通过引入外部文件，通过href属性，属性值是文件地址rel属性值如果是stylesheet，代表的就是引入样式表通过引入css文件到html文件中，从而实现样式的加载css内部不需要书写任何标签，直接属性css书写即可。4.倒入式样式表（只需要了解）：书写位置在head标签内，title标签下， style标签内。@import url(./1.css); url就是引入文件的路径

2.1 内嵌式

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 前端分离 --><style>div{color:red;font-size:18px;}</style></head><body><div> 文字样式 </div></body></html>

演示结果：

2.2 外链式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 外链式,href 相当于地址 --><link rel = "stylesheet" href="./1.css"></head>
<body><div>外链式</div>
</body>
</html>

演示结果：

2.3 导入式（不重要）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 跟内嵌式和外链式都有点关联，倒入式必须写在style标签的最顶部 --><style>/* div{width:800px;} 在其前面就不行*/@import url(./1.css);</style>
</head>
<body><div>导入式</div>
</body>
</html>

演示结果：

2.4 四种样式的优缺点

样式表名称	权重	优点	缺点
行内式	最高	权重最高，样式精确	第一、结构和样式没有进行分离,第二不能批量修改样式
内嵌式	大于导入式，等于外链式	能够将Css样式和骨架进行分离，可以进行批量属性的修改	样式和骨架没有进行完全分离，多个html文件不能使用同一套html文件
外链式	大于导入式，等于内嵌式	样式和骨架进行完全分离，一份css代码可以重复使用	如果我们些小的demo的时候，每次写外链式比较麻烦，并且看起来不直观j
导入式（jmport)	最低	样式和骨架完全分离，一份css代码可以重复使用	导入式涉及到加载顺序，说白了，页面会白一下，体验不好

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>@import url(2.css);p{color:blue;}</style><link rel="stylesheet" href="1.css">
</head>
<body><!-- 行内式权重最高 --><!-- <p style="color: red;">四种样式的权重问题</p> --><p>四种样式的权重问题</p></body>
</html>

演示结果：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>li{color: aqua;width: 100px;height: 100px;background-color: aliceblue;}</style></head>
<body><!-- 行内式权重最高 --><!-- <p style="color: red;">四种样式的权重问题</p> --><ul><li style="color: red;">西游记</li><li>红楼梦</li><li>水浒传</li><li>三国演义</li></ul></body>
</html>

演示结果：

2.5 关于样式的分离

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="3.css">
</head><body><div><ul><li class="cur">推荐</li><li>新闻</li><li>体育</li><li>娱乐</li><li>科技</li></ul></div>
</body>
</html>

div ul{width:505px;height:35px;list-style: none;
}
div ul li{width:100px;height:35px;background:navy;color: #fff;text-align:center;float: left;border-right:1px solid #fff;
}
div ul li.cur{background-color: darksalmon;
}

演示结果：

3 Css选择器

选择器分为两种：基础选择器，高级选择器
基础选择器：标签选择器，id选择器，类名选择器，通配符选择器
高级选择器：后代选择器，交集选择器，并集选择器

3.1 标签选择器

功能：实现全选同名标签，可以设置公共样式
缺点：只能进行全选，不能进行单独得布局

<!--标签选择器：选择方法是通过标签名称去选择书写方法：标签名选择方法：html文档中所有同名标签--><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{color:red;}h3{color:blue;}</style></head><body><p>段落标签</p><h3>三级标题</h3><h3>三级标题</h3><h3>三级标题</h3></body></html>

演示：

3.2 id选择器

通过标签上的id属性进行选择
书写方法：#id属性值（自定义）
选择范围：只能选中一个标签

id 其实就是标签的身份证号，具有唯一性
规定一个页面不能有同名id属性
优点：id属性的权重高，
缺点：只能实现单选，

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#p1{color:blue;}#p2{color: red;}</style>
</head>
<body><p id="p1">第一段文字</p><p id="p2">第二段文字</p><p>第三段文字</p>
</body>
</html>

演示结果：

3.3 类名属性

通过标签上的class属性进行选择
书写方法： . 匹配对应的class属性标签
选择范围：所有同名的class属性标签

id 和 class 属性的命名规范：第一个字符必须是字母，后面的字符可以是字母、数字、下划线。
多个class属性之间用空格隔开

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.par{color:red;}.cur{color:yellow;}</style>
</head>
<body><p class="par">第一段</p><p class="par cur">第二段</p><p class="par">第三段</p>
</body>
</html>

演示结果：

3.4 通配符选择器

书写方法：*
选择范围：选择包含html标签在内的所有标签
通配符 * 后面添加的样式，每一个标签都会加载一次
我们通常使用其来清除页面的默认样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{color:red;}</style>
</head>
<body><span>文字</span><p>p标签</p><div>div标签</div><h3>h3标签</h3>
</body>
</html>

演示结果：

清除页面的默认内外边距

*{margin:0;padding:0;
}

3.5 高级选择器后代选择器

通过标之间的后代关系去决定选择某个范围内的元素
书写方法：使用空格连续链接多级选择器。
作用：通过标签之间的后代关系去决定某个范围内的元素，具有精确匹配的特性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 ul li{color:red;}.box2 ul li{color:green;}</style>
</head>
<body><div class="box1"><ul><li>box1里面的li</li><li>box1里面的li</li><li>box1里面的li</li><li>box1里面的li</li></ul></div><div class="box2"><ul><li>box2里面的li</li><li>box2里面的li</li><li>box2里面的li</li><li>box2里面的li</li></ul></div>
</body>
</html>

结果演示：

需要注意后代关系不一定是父子关系
例如上述代码：
也可这样写，结果相同

<style>.box1 li{color:red;}.box2 li{color:green;}</style>

3.6 高级选择器交集选择器

作用：进行满足所有选择器的匹配
书写方法：将多个选择器连接书写，中间没有空格，不需要加任何符号。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>p{color:red;}/* 相同class 不会一起变蓝 */p.par{color:blue;}
</style>
<body><p>文字</p><p class="par">文字</p><div class="par">文字</div>
</body>
</html>

演示结果：

3.7 高级选择器并集选择器

并集选择器有“和”的意思，代表多个标签设置同样的属性假设div和p标签设置的属性是一样的，这个时候我们可以通过并集选择器设置同样的属性值
并集选择器非常灵活，可以结合多种选择器使用，就是利用逗号进行分隔从而区分属性
将多个选择器使用逗号进行连接

#par .par li,p{color:red;
}
表示#par里面的.par 里面的li 和 p标签的文字颜色为红色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p,div{color:red;}</style>
</head>
<body><p>文字</p><div>文字</div>
</body>
</html>

演示结果：

4 CSS的继承性和层叠性

4.1 继承性

只需要给祖先元素设置文字属性，后代元素就可以加载这个属性，这个特性我们叫做继承性。
注意：CSS可以继承的都是关于文字的，比如color，font-size，font-family等

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{color:red;}</style>
</head>
<body><div class="box"><ul><!-- 这里的li继承了div的属性 --><li>文字1</li><li>文字2</li><li>文字3</li><li>文字4</li></ul></div>
</body>
</html>

演示结果：

4.2 层叠性

通过下列的案例，我们发现一个标签可以被多个选择器选中，并设置对应的属性

    p{color:red;}.par{font-size:20px;}#par{background:black;}

如果多个选择器设置了同一个属性,我们发现下图中有两个选择器设置的内容被杠掉了，我们叫做被层叠了，这个就是CSS的层叠性，我们学习选择器的权重

id选择器>class选择器>标签选择器
如果被多个选择器同时选中，首先看id的，如果没有id看class，如果没有class则看标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{color:red;}.par{color: blue;}#par{color:purple;}</style>
</head>
<body><p class="par" id="par">文字</p>
</body>
</html>

演示：

小练习
如果遇到复杂的选择器，不要慌，要学会数选择器

方法：（指向的位置相同）首先将所有的选择器罗列出来，从id选择器比较，如果id选择能比出大小，则选择id选择器最多的。如果id选择器数量相同或者没有，则比较类名选择器，数量多的获胜。如果类名选择器没有则比较标签选择器，数量多的获胜，如果所有选择器的数量相同，则后写的覆盖前面的。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* id数量 类名数量 标签数量 *//* 1 2 2 */.box1 div.box2 #box3 p{color:red;}/* 2 1 2 */#box1 #box2 div.box3 p{color:blue;}/* 1 2 2 */#box1 div.box2 .box3 p{color:pink;}</style>
</head>
<body><div id="box1" class="box1"><div id="box2" class="box2"><div id="box3" class="box3"><p>文字</p></div></div></div>
</body>
</html>

演示结果：

如果都没有选择中对应标签，就看谁离得近，离得近的就是被选中的，如果u安泽的都是同一个元素中，再去数权重。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box1 #box2{color:blue;}.box1 .box2 .box3{color:purple;}</style>
</head>
<body><div id="box1" class="box1"><div id="box2" class="box2"><div id="box3" class="box3"><p>文字</p></div></div></div>
</body>
</html>

演示结果：

总结

遇到了复杂的选择器，首先看是否同时选中一个元素，如果都选择的是一个元素，则数权重，如果层级不同，比如有的是父亲级别，有的是爷爷级别，使用就近原则，如果所有的权重一样，选择位置也一样，后写的覆盖先写的。

5 Firworks

fireworks是一款图形编辑软件，作用是用来绘制图形，对于我们开发者而言，主要用来测量css相关属性和Photoshop类型，不同的是fireworks比Photoshop更简单，方便初学者使用。

我们主要围绕工具箱学习

5.1 缩放工具

作用：用来放大或者缩小画布，快捷键：ctrl+鼠标滚轮

5.2 抓手工具

作用：用来移动画布
快捷键：键盘空格键和按下鼠标后拖动

5.2 灌管工具

用来拾取文字或者图形的颜色
使用方法：通过滴管工具后找到油漆桶，查看颜色面板

5.3 文字工具

作用：获取设计图的字号，字体行高等

5.4 标尺辅助线

用来测量宽高的
取消辅助线：第一种是将辅助线拖回标尺
第二种：菜单栏的视图工具-辅助线-清除辅助线

5.5 注意事项

一定先锁定位图再进行操作

文字工具不消除锯齿

点击选择展开模式，如果图形编辑器不一样，消失了什么部件就可以这么做，它会重置恢复。

Css的基本学习及 fireworks相关推荐

php与html网页制作,web 一个简单地三级网页的设计和编写，html+css，适合学习制作的新手 WEB(ASP,PHP,...) 238万源代码下载- www.pudn.com...
文件名称: web下载收藏√ [ 5 4 3 2 1 ] 开发工具: HTML 文件大小: 4716 KB 上传时间: 2013-06-25 下载次数: 7 提供者: ericc 详细 ...
html css的简单学习
html css的简单学习 css的内边距: padding (auto.length.%)(顺序:上.右.下.左) padding-top padding-left padding-right pa ...
css flex属性学习笔记
参考文献 flex: 1 0calc((100% / min(var(--cx-active-view), var(--cx-max-views))) -var(--cx-split-gutter)) ...
〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构:HTML文件的固定结构:<html><head>...</head><b ...
《学习CSS布局》学习笔记
近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...
狂神css3笔记,【CSS】CSS3学习笔记（一）——选择器
✨CSS 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不 ...
学成在线首页——静态页面基础项目（HTML+CSS）【学习笔记】
来源:黑马前端难度:⭐(简单)--适合刚学习html和css的新手小白源码和素材:链接: https://pan.baidu.com/s/1Qf6OuMNyFDswJOcB93NCrw 提取码: ...
HTML+CSS零基础学习笔记（五）— 模拟淘宝首页（静态）
内容概览模拟淘宝首页(静态) 一.项目重难点二.效果图及源码模拟淘宝首页(静态) 一.项目重难点样式重置:在实际开发过程中,我们往往会新建一个单独的CSS文件(reset.css),用于对应H ...
H5+CSS+JavaScript入门学习
第一部分 H5 1.认识HTML  <!DOCTYPE html> <html lang="en"> <!- ...

Css的基本学习及 fireworks

文章目录

CSS简介

1、常用属性标签

1.1 Color 字体颜色

1.2 font-size 字号大小

1.3 font-family 字体

1.4 盒子三属性

2、样式表的使用

2.1 内嵌式

2.2 外链式

2.3 导入式（不重要）

2.4 四种样式的优缺点

2.5 关于样式的分离

3 Css选择器

3.1 标签选择器

3.2 id选择器

3.3 类名属性

3.4 通配符选择器

3.5 高级选择器后代选择器

3.6 高级选择器交集选择器

3.7 高级选择器并集选择器

4 CSS的继承性和层叠性

4.1 继承性

4.2 层叠性

总结

5 Firworks

5.1 缩放工具

5.2 抓手工具

5.2 灌管工具

5.3 文字工具

5.4 标尺辅助线

5.5 注意事项

Css的基本学习及 fireworks相关推荐

最新文章

热门文章

Css的基本学习 及 fireworks

文章目录

CSS简介

1、常用属性标签

1.1 Color 字体颜色

1.2 font-size 字号大小

1.3 font-family 字体

1.4 盒子三属性

2、样式表的使用

2.1 内嵌式

2.2 外链式

2.3 导入式（不重要）

2.4 四种样式的优缺点

2.5 关于样式的分离

3 Css选择器

3.1 标签选择器

3.2 id选择器

3.3 类名属性

3.4 通配符选择器

3.5 高级选择器 后代选择器

3.6 高级选择器 交集选择器

3.7 高级选择器 并集选择器

4 CSS的继承性和层叠性

4.1 继承性

4.2 层叠性

总结

5 Firworks

5.1 缩放工具

5.2 抓手工具

5.2 灌管工具

5.3 文字工具

5.4 标尺辅助线

5.5 注意事项

Css的基本学习 及 fireworks相关推荐

最新文章

热门文章

Css的基本学习及 fireworks

3.5 高级选择器后代选择器

3.6 高级选择器交集选择器

3.7 高级选择器并集选择器

Css的基本学习及 fireworks相关推荐