Web云笔记--CSS

简介: CSS CSS CSSWeb自学第二阶段之CSS参考资料:《Head First HTML&CSS》(中文第二版)(美国)弗里昂ISBN:9787508356464 中国电力出版社全部阶段:HTML基础àCSSà高级HTMLàJavaScriptàPHP脚本àWeb渗透  前情提要:早在上世纪九十年代初,为了迎合互联网的发展,(因为当时互联网是有了但是人们上网没东西可看。

CSS CSS CSS

Web自学第二阶段之CSS

参考资料:《Head First HTML&CSS》(中文第二版)(美国)弗里昂ISBN9787508356464 中国电力出版社

全部阶段:HTML基础àCSSà高级HTMLàJavaScriptàPHP脚本àWeb渗透

 

 

前情提要:早在上世纪九十年代初,为了迎合互联网的发展,(因为当时互联网是有了但是人们上网没东西可看。。)人们迫切的期望一种统一的版面在网络上共享信息,一种叫做超文本(hyper text)的文本诞生了,超文本之所以叫超文本是因为它不仅能展现出文本,还能“花样”地展现文本(好吧当时根本没有多媒体的概念)比如字体有大有小,有不同的颜色,甚至画一张表格(可以看成word的前身),这种超文本能够传达出比纯文本文件更丰富的内容,所以将之放在网页上再好不过了,为了实现它,超文本标记语言html诞生了。

 

 

7.CSS简介

 

 

!!!!!!!!!!!!!!CSS的前身:没有前身,只能说是雏形。早期超文本标记语言html为了在排版,字体和色彩等方面增添一些样式,特别引入了元素的style属性,通过style属性程序员可以控制元素的文本、背景、边框、内外边距等的样式,虽然这个属性目前任然通用而且也被小编我认为是最方便最直观的添加样式的方式,但是由于市场的原因,比如说要对网页样式进行批量的修改亦或是针对不同时间地点甚至不同用户而要采用不同的样式风格,因此我们引入了新的语言-------CSS

 

CSScascade style sheet层叠样式表)文件更像是一个滤镜,网页就像一张照片,通过CSS而焕然一新!!!!!

 

改变网页的样式有三种方法,分别是通过html属性,css文件以及JavaScript程序,但是三种方式更本上都是通过css语言来完成的!!!!

 

!!!!!!!!!!!!CSS的语法和HTML截然不同,没有了尖括号,除号,空格,引号和等号,取而代之的是大括号,减号,分号,逗号和冒号。

 

color样式貌似不会继承。

 

!!!!!!下边框与下划线的区别:如果文本(innerHTML)有转行(认为转或者自动转)那么下划线将有多行的,但下边框(border-bottom)只有一条。

 

Css的基本组成单元(就是一个个大括号)叫做选择器。

 

!!!Css只能对body以下的元素(包括body)增加样式。

 

Css文件既可以内嵌在html中也可以通过外部链接,固定格式:

 

通常一个网站的所有网页的风格一致,所以通常会共享同一个css文件。

 

绝大多数样式属性都是继承的。

继承与覆盖。

 

 

 

!!!!!Css的批量增添样式方法:既可以通过元素类型来选择,也可以自定义类和ID

 

元素和类是多对多的关系。

元素和ID是一对一的关系。

 

Csshtml的属性值之间都是空格隔开,但属性之间前者是分号后者是空格。

 

Css中有错误,错误以下的其他规则都会被忽略??????!!!!!!!!!!!

 

Css查错工具:http://jigsaw.w3.org/css-validator/

 

行业建议:这个社会不需要精而需要广,不会的点只要会查就ok

 

 

8CSS语文课------扩大词汇量

 

字体五大家族:

 

Sans-serif系列:

Verdana

Arial Black

Trebuchet MS

Arial

Geneva

特点是:无衬线,很“工整”,粗细均匀

 

Serif系列:

Times

Times New Roman

Georgia

特点:有棱角,粗细不均

 

Monospace系列:

Courier

Courier New

Andale Mono

特点:不同字符不同的宽度

 

Cursive系列:

Comic sans

Apple Chancery

特点:草书

 

Fantasy系列:

LAST NINJA

Impact

特点:花样字体

 

Css指定字体font-family:字体名称之间他妈的用逗号隔开。。。记住就好记住就好

而且大小写必须一致(首字母大写)

从左至右,客户机不支持此字体就向右找,所以最后一个通常写五大系列名

 

!!!因为空格的特殊性,字体名中有空格的话,要用双引号把整个字体名括起来

 

Web云字体@font-face

字体文件与字体文件格式:

字体文件:定义了字体样式的形状(就是图片)

字体文件格式:用那种编码来表示上面的字体文件(联想图片格式)

 

!!!!!字符的不同字体在字符编码中都是同一个

 

常用格式:ttf otf eot svg woff

 

每日推荐:PDF文件跨设备跨系统跨字体值得一用(缺点是体积大)

 

每个字体拥有一个@font-face

 

通常屏幕像素1cm=25px1px=0.4mm

 

指定字体大小的三种方式:

1.     指定px值(字体高度)

2.     指定百分比%:相对于父元素

3.     em。同上

 

一些默认值:

H1:2em

H2:1.5em

H3:1.17em==big

H4==p==ul==ol==1em

H5==0.83em==small

H6:0.75em

Body:14px

习惯:调整body字体大小控制所有字体等比例缩放

 

快捷方式:xx-small x-small small medium large x-large xx-large

 

Jim独创L(不要脸)

Small- small small+ medium- medium medium+ large- large large+

或者:

Smallest smaller small small-medium medium medium-large large larger largest

 

温馨提示:了解就好,看一遍就好,不用记忆。。。

 

改变字体粗细:

Font-weightnormal/bold/lighter。。。

 

Text-decorationnone去掉下划线

 

斜体:

Font-styleitalic/oblique

 

HTMLcss都不是程序语言,所以浏览器都有差错改错功能,不区分大小写

 

三种指定颜色方法:

1.rgbxx%,xx%,xx%)或rgbxx,xx,xx   rgba?

2.#xxxxxx缩写:#xxx

3.颜色名:150+

 

Css语法错误,浏览器忽略整个选择器,不影响其他选择器

目录
相关文章
|
20天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
29 6
|
20天前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
25 5
|
3月前
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性:继承性、层叠性和优先级,并深入讲解了背景图的相关属性,包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中,继承性指子元素自动继承父元素的文字控制属性;层叠性指相同属性后定义覆盖前定义,不同属性可叠加;优先级涉及选择器权重,包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
262 91
|
2月前
|
存储 前端开发 安全
详解CSS之Web 字体
详解CSS之Web 字体
29 4
|
2月前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
66 2
|
2月前
|
开发框架 网络协议 Java
web搜集-指纹识别 课程笔记
web搜集-指纹识别 课程笔记
|
3月前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
70 28
|
2月前
|
存储 前端开发 JavaScript
CSS:现代Web设计的不同技术
【10月更文挑战第11天】 CSS:现代Web设计的不同技术
|
3月前
|
前端开发 JavaScript
【前端web入门第三天】01 css定义和引入方式 四种标签选择器
本文档详细介绍了CSS的基础知识及其应用。内容涵盖了CSS的定义、CSS在HTML中的引入方式,包括内部样式表、外部样式表及行内样式表的使用场景与方法。此外,还深入解析了不同种类的选择器:标签选择器、类选择器、ID选择器以及通配符选择器的功能与应用场景,并提供了实例帮助理解。最后,通过具体的新属性示例,指导如何使用这些选择器来实现基本的盒子绘制。适合初学者系统学习CSS。
53 15
|
3月前
|
前端开发