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

目录
相关文章
|
24天前
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性:继承性、层叠性和优先级,并深入讲解了背景图的相关属性,包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中,继承性指子元素自动继承父元素的文字控制属性;层叠性指相同属性后定义覆盖前定义,不同属性可叠加;优先级涉及选择器权重,包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
239 91
|
24天前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
51 28
|
24天前
|
前端开发 JavaScript
【前端web入门第三天】01 css定义和引入方式 四种标签选择器
本文档详细介绍了CSS的基础知识及其应用。内容涵盖了CSS的定义、CSS在HTML中的引入方式,包括内部样式表、外部样式表及行内样式表的使用场景与方法。此外,还深入解析了不同种类的选择器:标签选择器、类选择器、ID选择器以及通配符选择器的功能与应用场景,并提供了实例帮助理解。最后,通过具体的新属性示例,指导如何使用这些选择器来实现基本的盒子绘制。适合初学者系统学习CSS。
35 15
|
23天前
|
前端开发
|
23天前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍,主要解决多个`<div>`标签在同一行显示的问题,即一个在左边,另一个在右边。文中介绍了标准流、浮动及flex布局的概念,重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法,包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法,并提供了示例代码帮助理解。
|
2月前
|
移动开发 JavaScript 前端开发
揭秘!如何用Web2py+HTML5/CSS3/jQuery打造超炫响应式网站?你的设计梦想即将照进现实!
【8月更文挑战第31天】本文详细介绍如何利用Web2py框架及HTML5、CSS3与jQuery构建响应式网站。首先需安装Python和Web2py,并启动服务器。接着,在Web2py中创建新应用,例如命名为“ResponsiveSite”。随后,编写HTML5基本结构,包括头部、导航栏等元素。在`styles.css`文件中添加CSS3样式代码,实现响应式布局。最后,通过在`scripts.js`中加入jQuery脚本提升页面交互性,如点击导航项时平滑滚动至目标区域。此教程为你打下响应式网站设计的基础,便于进一步扩展和优化。
14 1
|
2月前
|
前端开发 开发者 容器
探索现代Web开发中的CSS Grid布局技术
【8月更文挑战第29天】在数字时代的浪潮中,网页设计不断进化以适应日新月异的用户需求。CSS Grid布局技术作为一项革新性的前端工具,为设计师和开发者提供了前所未有的布局能力。本文旨在通过深入浅出的方式介绍CSS Grid的核心概念、基本用法以及在实际项目中的应用,帮助读者快速掌握这一强大的网页布局工具。
41 3
|
2月前
|
前端开发 开发者 C#
WPF开发者必读:MVVM模式实战,轻松实现现代桌面应用架构,让你的代码更上一层楼!
【8月更文挑战第31天】在WPF应用程序开发中,MVVM(Model-View-ViewModel)模式通过分离应用程序的逻辑和界面,提高了代码的可维护性和可扩展性。本文介绍了MVVM模式的三个核心组件:Model(数据模型)、View(用户界面)和ViewModel(处理数据绑定和逻辑),并通过示例代码展示了如何在WPF项目中实现MVVM模式。通过这种方式,开发者可以构建更加高效和可扩展的桌面应用程序。
59 0
|
2月前
|
Java Spring 数据库
怎样动动手指就能实现数据操作?Spring Data JPA背后的魔法揭秘
【8月更文挑战第31天】在Java开发中,数据库交互至关重要。传统的JDBC操作繁琐且难维护,而Spring Data JPA作为集成JPA的数据访问层解决方案,提供了CRUD等通用操作接口,显著减少代码量。通过继承`JpaRepository`,开发者能轻松实现数据的增删改查,甚至复杂查询和分页也不再困难。本文将通过示例详细介绍如何利用Spring Data JPA简化数据访问层的开发,提升代码质量和可维护性。
29 0
|
2月前
|
Java 数据安全/隐私保护 安全
掌握Struts 2动态方法调用,让你的Web开发如虎添翼,轻松应对复杂业务需求!
【8月更文挑战第31天】在Web应用开发中,Struts 2框架因强大功能和灵活性而广受青睐。其动态方法调用(DMI)特性允许在不修改配置文件的情况下动态调用Action类中的方法,相比传统方法调用(需在`struts.xml`中为每个方法创建单独的`<action>`),DMI简化了配置并提升了灵活性、可维护性和扩展性。本文通过对比DMI与传统方法调用,展示如何利用DMI简化开发流程,并强调了在使用DMI时需注意的安全性和访问控制问题。
17 0
下一篇
无影云桌面