css学习笔记.doc
css学习笔记.doc
- 配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词：
- css 学习 笔记
- 资源描述：
-
HTML+CSS 第一章 1. CSS 基本观念 ; 2. CSS 语法 ; 3. CSS 基本属性; CSS(Cascading Style Sheets)简介 随着Internet的迅猛发展，HTML被广泛应用，上网的人们当然希望网页做得漂亮些，因此HTML排版和界面效果的局限性日益暴露出来。为了解决这个问题，人们也走了不少弯路，用了一些不好的方法，比如给HTML增加很多的属性结果将代码变得很臃肿，将文本变成图片，过多利用Table来排版，用空白的图片表示白色的空间等。直到CSS出现。 CSS可算是网页设计的一个突破，它解决了网页界面排版的难题。可以这么说，HTML的Tag主要是定义网页的内容(Content)，而CSS决定这些网页内容如何显示(Layout)。 CSS的英文是Cascading Style Sheets，中文可以翻译成串联式样式表。 CSS基本语法 一个样式(Style)的语法由三部分构成：Selector(中文叫选择器有点怪怪的，就用英文吧)，属性(Property)，属性值(Value)。 selector {property: value} 举个例子，下面的代码p就是selector，color就是属性，blue就是属性值。 p {color:blue} HTML中所有的Tag都可以作为selector。 注：如果你想为Style加多个属性，在两个属性之间要用分号加以分隔。下面的Style就包含2个属性，一个是对齐方式居中，一个字体颜色为红，当中用分号分隔开。 p {text-align:center;color:red} 为了提高Style代码的可读性，你也可以分行写： p { text-align: center; color: black; font-family: arial } 组合(Grouping) 你也可以将相同的属性和属性值赋予多个Selector。Selector之间用逗号分隔。 h1,h2,h3,h4,h5,h6 { color: red } 上面的例子是将所有正文标题(<h1>到<h6>)的字体颜色都变成红色。 Class Selector 利用Class Selector，你可以用同样的HTML Tag构成不同的样式。比如说，你希望段落<p>有两种样式，一种是居中对齐，一种是居右对齐。你就可以写如下样式： p.right {text-align:right} p.center {text-align:center} 其中right和center就是两个class。然后你就可以引用这两个class，示例代码如下： <p class="center">这一段居中显示。</p> <p class="right">这一段是居右显示。</p> 你也可以不用HTML Tag，直接用.加上Class名称作为一个Selector。示例代码如下： .center {text-align: center} 这种通用的Class Selector就没有Tag的局限性，可以用于不同的Tag。比如： <h1 class = "center">这个标题居中显示。</h1> <p class = "center">这个段落居中显示。</p> CSS注释 为了方便你自己或者他人日后更好地理解你的CSS代码，你可以写CSS代码注释。CSS代码注释以/*开头，以*/结束。 /* 段落样式 */ CSS按其位置可以分成三种： § 内嵌样式(Inline Style) § 内部样式表(Internal Style Sheet) § 外部样式表(External Style Sheet) 内嵌样式(Inline Style) Inline Style是写在Tag里面的。内嵌样式只对所在的Tag有效。 <P style="font-size:20pt; color:red">这个Style定义<p></p>里面的文字是20pt字体，字体颜色是红色。</p> 显示示例 内部样式表(Internal Style Sheet) 内部样式表是写在HTML的<head></head>里面的。内部样式表只对所在的网页有效。 <HTML> <HEAD> <STYLE type="text/css"> H1.mylayout {border-width:1; border:solid; text-align:center; color:red} </STYLE> </HEAD> <BODY> <H1 class="mylayout"> 这个标题使用了Style。</H1> <H1>这个标题没有使用Style。</H1> </BODY> </HTML> 内部样式表(Internal Sytle Sheet)要用到Style这个Tag，写法如下： <STYLE type="text/css"> ...... </STYLE> 外部样式表(External Style Sheet) 如果很多网页需要用到同样的样式(Styles)，用什么方法呢？ 将样式(Styles)写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。 <HTML> <HEAD> <link href="linkd.css" rel="stylesheet" type="text/css"> </HEAD> <BODY> <H1> 这个标题使用了Style。</H1> </BODY> </HTML> 使用外部(Extenal)样式表，相对于内嵌(Inline)和内部式(Internal)的，有以下优点： 样式代码可以复用。一个外部CSS文件，可以被很多网页共用。 便于修改。如果要修改样式，只需要修改CSS文件，而不需要修改每个网页。 提高网页显示的速度。如果样式写在网页里，会降低网页显示的速度，如果网页引用一个CSS文件，这个CSS文件多半已经在缓存区(其它网页早已经引用过它)，网页显示的速度就比较快。 串联(Cascading) CSS第一个字母，是Cascading，意为串联。它是指不同来源的样式(Styles)可以合在一起，形成一种样式。 Cascading的顺序是： § 浏览器缺省(browser default)(优先级最低) § 外部样式表(Extenal Style Sheet) § 内部样式表(Internal Style Sheet) § 内嵌样式表(Inline Style)(优先级最高) CSS 基本属性 CSS属性列表 属性名称 字体属性（Font） font-family使用什么字体 font-style字体是否斜体 font-variant是否用小体大写 font-weight字体的粗细 font-size字体的大小 颜色和背景属性 Color 颜色 Background-color 颜色 Background-image 路径 Background-repeat 背景图片重叠方式Repeat-x、repeat-y、no-repeat Background-attachment 背景图片是否随滚动条滑动Scroll、Fixed Background-position 背景图片的位置top、left、right、bottom等 文本属性 Word-spacing单词之间的间距 Letter-spacing字母之间的间距 Text-decoration文字的装饰样式 Vertical-align垂直方向的位置 Text-align 对齐方式 Text-indent 首行的缩进方式 Line-height 文本的行高 边距属性 Margin-top顶端边距 Margin-right右侧边距 Margin-bottom底端边距 Margin-left左侧边距 填充距属性 Padding-top顶端填充距 Padding-right右侧填充距 Padding-bottom底端填充距 Padding-left左侧填充距 边框属性 Border-top-width顶端边框宽度 Border-right-width右侧边框宽度 Border-bottom-width底端边框宽度 Border-left-width左侧边框宽度 Border-width一次定义宽度 Border-color一次定义边框颜色 Border-style设置边框样式 Border-top一次定义顶端 Border-right一次定义右侧 Border-bottom一次定义底端 Border-left一次定义左侧 Width定义宽度属性 Height定义高度属性 Float文字环绕 Clear哪一边没有浮动 分级属性 Display 定义是否显示 White-space怎样处理空白（nowrap不换行） List-style-type加项目编号 List-style-image加图案 List-style-position第二行起始位置 List-style一次定义列表 伪类 a:link {color: #FF0000} /* 未被访问的链接 红色 */ a:visited {color: #00FF00} /* 已被访问过的链接 绿色 */ a:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */ a:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */展开阅读全文
咨信网温馨提示：1、咨信平台为文档C2C交易模式，即用户上传的文档直接被用户下载，收益归上传人（含作者）所有；本站仅是提供信息存储空间和展示预览，仅对用户上传内容的表现方式做保护处理，对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿，我们不确定上传用户享有完全著作权，根据《信息网络传播权保护条例》，如果侵犯了您的版权、权益或隐私，请联系我们，核实后会尽快下架及时删除，并可随时和客服了解处理情况，尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确)，网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据，个别因单元格分列造成显示页码不一将协商解决，平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺，下载前须认真查看，确认无误后再购买，务必慎重购买；若有违法违纪将进行移交司法处理，若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传，付费前请自行鉴别，如您付费，意味着您已接受本站规则且自行承担风险，本站不进行额外附加服务，虚拟产品一经售出概不退款（未进行购买下载可退充值款），文档一经付费（服务费）、不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印，是因预览和防盗链等技术需要对页面进行转换压缩成图而已，我们并不对上传的文档进行任何编辑或修改，文档下载后都不会有水印标识（原文档上传前个别存留的除外），下载后原文更清晰；试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓；PPT和DOC文档可被视为“模板”，允许上传人保留章节、目录结构的情况下删减部份的内容；PDF文档不管是原文档转换或图片扫描而得，本站不作要求视为允许，下载前可先查看【教您几个在下载文档中可以更好的避免被坑】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用；网站提供的党政主题相关内容(国旗、国徽、党徽－－等)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
6、文档遇到问题，请及时联系平台进行协调解决，联系【微信客服】、【QQ客服】，若有其他问题请点击或扫码反馈【服务填表】；文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“【版权申诉】”，意见反馈和侵权处理邮箱：1219186828@qq.com；也可以拔打客服电话：0574-28810668；投诉电话：18658249818。
实名认证
平台协调中心【客服】
自信AI助手
微信客服
客服QQ
发送邮件
意见反馈
链接地址：https://www.zixin.com.cn/doc/7188474.html