学习内容 Ø        CSS的基本语法 Ø        CSS选择器 Ø        常见的CSS样式 Ø        网页中3种使用CSS的方式 能力目标 Ø        理解CSS的作用 Ø        掌握CSS基本语法 Ø        熟练掌握CSS选择器的定义和使用 会使用CSS设置文字样式 本章简介 对于网页设计者而言,如果希望网页美观.大方,并且升级方便.维护轻松,那么仅仅使用 HTML 不能满足要求,CSS (层叠样式表)在这中间扮演着重要的角色.HTML规定了…
一.CSS基本概念: CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 二.样式表的分类 1.内联样式表(和html联合显示,控制精确,但是可重用性差,冗余多) 例:<p style="font-size:14px;">内联样式表</p> 以上就是一个简单的内联样式表,用在<body>中的标签中,相当于style附在标签中,只改变该标签p中的样式和格式. 2.内嵌样式表…
css总的来说有三种css样式可供选择: 1,行内样式表 行内样式表,直接写在了html文件的元素中,例如: <div style="color:red;"></div> 2,页内嵌入样式 页内嵌入样式是利用style标签将样式表的内容直接写在html文件的head标签中,例如: <head> <style> p{ color:red; } </style> </head> <body> <p&g…
一. css基础 1. 什么是css 层叠样式表:层叠 2. css的三种使用方式 style 属性 --> <div style="css属性值"></div> style 属性 -->写在head标签里 <head> <style> ... </style> </head> link 外都引入单独的css文件 --> <link rel="stylesheet" hr…
本文最初于2015-10-03发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS几种扩展选择器:后代选择器.交集选择器.并集选择器.伪类选择器 CSS样式优先级 前言 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的…
CSS的继承性 我们来看下面这样的代码,来引入继承性: 上方代码中,我们给div标签增加红色属性,却发现,div里的每一个子标签<p>也增加了红色属性.于是我们得到这样的结论: 有一些属性,当给自己设置的时候,自己的后代都继承上了,这个就是继承性. 继承性是从自己开始,直到最小的元素. 但是呢,如果再给上方的代码加一条属性: 上图中,我们给div加了一个border,但是发现只有div具备了border属性,而p标签却没有border属性.于是我们可以得出结论: 关于文字样式的,都具有继承性.…
本文最初于2017-07-29发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重点 CSS的继承性 CSS的层叠性 计算权重 权重问题大总结 CSS样式表的冲突的总结 权重问题深入 同一个标签,携带了多个类名 !important标记 CSS的继承性 我们来看下面这样的代码,来引入继承性: 上方代码中,我们给div标签增加红色属性,却发现,div里的每一个子标签<p>也增加了红色属性.于是我们得到这样的结论: 有一些属…
本文最初于2015-10-04发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重要内容 CSS的单位 字体属性 文本属性 定位属性:position.float.overflow等 CSS的单位 html中的单位只有一种,那就是像素px,所以单位是可以省略的,但是在CSS中不一样. CSS中的单位是必须要写的,因为它没有默认单位. 绝对单位: 1 in=2.54cm=25.4mm=72pt=6pc. 各种单位的含义: i…
前端样式,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道一名好的前端,要尽可能不使用hack的情况下实现需求,做到较好的用户体验.可是啊,现实太残酷,浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协,虽然这只是个别情况.今天,结合自己的经验和理解,做了几个demo把IE6~IE10和其他标准浏览器的CSS hack做一个总结,也许本文应该…
CSS的样式表其实就是美观页面的,加一些样式. 一.样式表的三种分类: ①内联样式:写在某一个标签里面的样式. 优点:控制精确. 缺点:代码重用性差.(太多了不好写)页面代码乱.(太乱,后期不方便看) 优先级最高!! ②内嵌样式:嵌在某一个页面里的.(是写在<head>里面,专门用来写样式) 需要添加一个标签: <style lype="lexl/css"></style> 优点:代码重用性好.(一起找到很多元素,统一加上一个样式,写一遍可以)缺点:…