Web云笔记--CSS

CSS CSS CSS

Web自学第二阶段之CSS

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

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

 

 

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

 

 

7.CSS简介

 

 

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

 

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

 

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

 


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

 

的color样式貌似不会继承。

 

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

 

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

 

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

 

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

 

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

 

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

继承与覆盖。

 

 

 

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

 

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

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

 

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

 

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

 

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

 

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

 

 

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

 

字体五大家族:

 

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=25px;1px=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-weight:normal/bold/lighter。。。

 

Text-decoration:none去掉下划线

 

斜体:

Font-style:italic/oblique

 

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

 

三种指定颜色方法:

1.rgb(xx%,xx%,xx%)或rgb(xx,xx,xx)  
rgba?

2.#xxxxxx缩写:#xxx

3.颜色名:150+种

 

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

时间: 2024-08-02 10:29:05

Web云笔记--CSS的相关文章

开发基于Web的CSS设计器.代码参考

css|web|参考|设计 这里对前面文章讲的CSS设计器系统关键代码作一些小结,如果没有看过前面文章的请先参看"开发基于Web的CSS设计器" 解析CSS样式文件 这段代码主要作用是把CSS文件分解为多个样式类,并按名称/文本属性生成ClassItem对象,并保存在一个ArrayList(cssList)中(C#代码) //读取文件FileInfo theSource= new FileInfo (@m_filePath);StreamReader reader = theSourc

开发基于Web的CSS设计器

css|web|设计 这半年参与了一个基于asp.net的中型应用系统开发,其间经历种种,收获不少.前段时间做了一个基于Web的CSS设计器,虽然技术不算复杂,不过综合了C#/XML/HTC等技术,对于大家应该有一定参考价值:而且该设计器相对于系统比较独立,因此在这里和大家共享,供大家参考,并请多提意见! 设计器的主要功能就是在web界面上设计操作CSS样式表,目的是方便用户自定义系统界面. 相信做过Web开发的人大多用过Dreamweaver或者做asp.net开发也应该用过vs.net,那么

字体-关于web前端 css 选择器的问题

问题描述 关于web前端 css 选择器的问题 我想请问通用选择器和body选择器的区别是什么? 为什么我用通用选择器定义好默认样式之后,在后续定义样式时很难改变例如 *{ font:12px Arial,"Mcrosoft Yahei",Verdana; } 后边我定义字体大小时,字体大小不会改变,依然是12px.用h1写出来的字也是12px 但是如果将选择器换成body时就不会出现这种情况. body{ font:12px Arial,"Mcrosoft Yahei&qu

符合Web标准!CSS同比例缩小图片

css|web|web标准 当然,生成缩略图这个工作如果交给程序来完成,效果会好很多,但是有时出于某种因素,例如服务器不支持GD之类的,难免就要请CSS代劳. 把一副大图片按比例缩小到某个尺寸,对于现代浏览器,直接使用max-width和max-height两条CSS属性即可. 对于IE 6.0及以下版本,以上两条CSS属性均不会被理会.之前处理这种事情,我们往往会借助Javascript,然后为图片加上onload事件.例如: Example Source Code <imgsrc=".

web前端-css遇到十分基础的问题,求解释

问题描述 css遇到十分基础的问题,求解释 只将html body 的margin padding设置为0时开发中遇到的问题"> 再加上div 发现多了8px的margin!!! 这是什么原因呢,是代码的原因,还是浏览器的原因?我用的360 解决方案 你不加div的时候相当于设置body的margin和padding为0,此时顶部和左侧都没有空隙是正常的.而加上div之后你相当于设置html的body元素的div元素的样式为margin 0和padding 0,而body则没有设置marg

使用Web标准建站第7天:CSS入门

css|web|web标准|css|web标准 在了解XHTML代码规范后,我们就要进行CSS布局.首先先介绍一些CSS的入门知识.如果你已经很熟悉了,可以跳过这一节,直接进入下一节.CSS是Cascading Style Sheets(层叠样式表)的缩写.是一种对web文档添加样式的简单机制,属于表现层的布局语言. 1.基本语法规范 分析一个典型CSS的语句: p {COLOR:#FF0000;BACKGROUND:#FFFFFF} 其中"p"我们称为"选择器"(

使用Web标准建站第8天:CSS布局入门

css|web|web标准|css|web标准 CSS布局与传统表格(table)布局最大的区别在于:原来的定位都是采用表格,通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距:而现在则采用层(div)来定位,通过层的margin,padding,border等属性来控制版块的间距.1.定义DIV分析一个典型的定义div例子:#sample{ MARGIN: 10px 10px 10px 10px;PADDING:20px 10px 10px 20px; BORDER-RIGHT:

使用Web标准建站第9天:CSS布局入门

css|web|web标准|css|web标准 接下来开始要真正设计布局了.和传统的方法一样,你首先要在脑海里有大致的轮廓构想,然后用photoshop把它画出来.你可能看到有关web标准的站点大都很朴素,因为web标准更关注结构和内容,实际上它与网页的美观没有根本冲突,你想怎么设计就怎么设计,用传统表格方法实现的布局,用DIV也可以实现.技术有一个成熟的过程,把DIV看成和TABLE一样的工具,如何运用就看你的想象力了.注:在实际应用过程中,DIV在有些地方的确不如表格方便,比如背景色的定义.

JavaScript/jQuery、HTML、CSS 构建 Web IM 远程及时聊天通信程序_jquery

以及需要用到Http方式和Openfire通信的第三方库(JabberHTTPBind). JabberHTTPBind是jabber提供的XMPP协议通信的Http bind发送的形式,它可以完成WebBrowser和Openfire建立长连接通信. 主要通信流程如下图所示: 用户A通过JavaScript jsjac.js库发送一条消息到JabberHTTPBind这个Servlet容器,然后JabberHTTPBind的Servlet容器会向Openfire发送XMPP协议的XML报文.O