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语法错误,浏览器忽略整个选择器,不影响其他选择器

目录
相关文章
|
2天前
|
前端开发
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
|
9天前
|
XML JSON Java
【Web系列笔记】Restful
本文讨论了RESTful接口设计的原因和原则。传统方式中,http接口常按功能聚合,导致行为不规范,如订单操作有多种请求方式。RESTful设计强调资源的结构清晰、标准统一,通过资源URI、表现层和状态转化来组织接口。它推荐使用GET、POST、PUT和DELETE等HTTP方法对应资源的创建、读取、更新和删除操作。在实践中,应避免URI中包含动词,确保每个URI代表一种资源,并利用HTTP动词表达操作。这样能提高接口的易理解和扩展性。
34 8
|
11天前
|
JSON 缓存 前端开发
【Web系列相关笔记】跨域
CORS是一种W3C标准,用于跨域资源共享,允许浏览器在发送AJAX请求时突破同源策略。它涉及浏览器和服务器两方,其中浏览器自动处理CORS请求,添加Origin头信息。服务器需通过返回特定的Access-Control-Allow-*头信息来允许跨域访问。
21 0
|
12天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
12天前
|
前端开发 JavaScript UED
【专栏:HTML 与 CSS 前端技术趋势篇】Web 性能优化:CSS 与 HTML 的未来趋势
【4月更文挑战第30天】本文探讨了CSS和HTML在Web性能优化中的关键作用,包括样式表压缩、选择器优化、DOM操作减少等策略。随着未来趋势发展,CSS模块系统、自定义属性和响应式设计将得到强化,HTML新特性也将支持复杂组件构建。同时,应对浏览器兼容性、代码复杂度和性能功能平衡的挑战是优化过程中的重要任务。通过案例分析和持续创新,我们可以提升Web应用性能,创造更好的用户体验。
|
12天前
|
前端开发 JavaScript 搜索推荐
【专栏:HTML 与 CSS 前端技术趋势篇】HTML 与 CSS 在 Web 组件化中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在Web组件化中的应用及其在前端趋势中的重要性。组件化提高了代码复用、维护性和扩展性。HTML提供组件结构,语义化标签增进可读性,支持用户交互;CSS实现样式封装、布局控制和主题定制。案例展示了导航栏、卡片和模态框组件的创建。响应式设计、动态样式、CSS预处理器和Web组件标准等趋势影响HTML/CSS在组件化中的应用。面对兼容性、代码复杂度和性能优化挑战,需采取相应策略。未来,持续发掘HTML和CSS潜力,推动组件化开发创新,提升Web应用体验。
|
13天前
|
前端开发 开发者
【Web 前端】CSS 样式覆盖规则?
【4月更文挑战第22天】【Web 前端】CSS 样式覆盖规则?
|
13天前
|
前端开发 容器
【Web 前端】css选择器有哪些?
【4月更文挑战第22天】【Web 前端】css选择器有哪些?
|
13天前
|
编解码 前端开发 开发者
【Web 前端】CSS常用尺寸单位有哪些?应用场景?
【4月更文挑战第22天】【Web 前端】CSS常用尺寸单位有哪些?应用场景?
|
13天前
|
前端开发 JavaScript UED
【Web 前端】css的引用有哪些,link和@import的区别?
【4月更文挑战第22天】【Web 前端】css的引用有哪些,link和@import的区别?