Web前端开发（HTML5+CSS3+JavaScript） 课件 第4章 CSS基础_第1页
Web前端开发（HTML5+CSS3+JavaScript） 课件 第4章 CSS基础_第2页
Web前端开发（HTML5+CSS3+JavaScript） 课件 第4章 CSS基础_第3页
Web前端开发（HTML5+CSS3+JavaScript） 课件 第4章 CSS基础_第4页
Web前端开发（HTML5+CSS3+JavaScript） 课件 第4章 CSS基础_第5页
已阅读5页，还剩29页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

CSSJSHTML第4章CSS基础Web前端基础技术Contents目录CSS概念CSS基础选择器组合选择器1.CSS概念1.1什么是CSS1.2CSS作用CSS：CascadingStyleSheet层叠式样式表HTML：用于主要呈现内容和结构；使用属性、格式化标记来设定效果，效果有限.CSS：1.增强/改变元素的效果；2.页面布局；元素样式(效果)：文本：字体、大小、颜色；外观：宽度、高度；边框、圆角|背景色（图），阴影、过渡和动画；布局：整体/局部

…1.3CSS基本语法(样式表)选择器{

属性名：属性值；属性名：属性值；…}选择器：用于选择应用效果的目标元素。即选择HTML中的哪个或哪些元素来应用样式效果。基础选择器：1.标记选择器；2.ID选择器；3.类选择器；4.属性选择器；5.伪类、伪元素选择器组合选择器CSS注释：

/*注释内容*/；HTML注释：<!-注释内容-->p{ font-family:黑体；/*为便于阅读，一般分行书写每一个样式属性*/ font-size:18px； color:red；}以标记选择器为例，声明样式：属性名（固定）：样式名，如字体名、大小和颜色等；属性值：即相应的取值；多对样式属性使用分号隔开字体样式属性

(代替<font></font>及其属性、<i></i>和<b></b>标记)样式属性名说明font-family字体名，使用多个字体时以逗号分隔。如果字体名包含空格，使用单（双）引号括起font-size字体大小，单位为px或%color文本颜色，取值为颜色单词、16进制和RGB或RGBA函数。通常使用颜色选取器来选择颜色。font-style是否斜体，取值为

normal、oblique/italic。

代替了<i></i>标记font-weight字体粗细，取值为数字或关键字，如100~900、bold(=700)、bolder、lighter。代替<b></b>标记其他外观样式属性属性名说明backgorund-color背景颜色，取值同color。width宽度，单位为px或%Height高度，单位为px或%border边框，取值为：边框宽度边框样式边框颜色。例如1像素红色边框，border:

1pxsolidred;样式包括：solid(实线边框)、dotted（点画线）、dashed（虚线）和double(双线)元素有4个边框：border-【top/left/right/bottom】注意：在本章示例中，重点掌握CSS样式使用的基本语法，同时结合简单的、常用的样式,如下列常用的样式2.基础选择器(5种)标记选择器；ID选择器；类选择器；属性选择器；伪类、伪元素选择器直接使用标记名来声明样式，这样页面中所有相同的标记都使用相同的样式；1.标记选择器p{font-family:黑体,’TimesNewRoman’；font-size:18px；color:red；}如：所有的段落文字都使用“黑体、18px大小、红色字体”说明：多个字体名使用逗号分隔，后面的字体名表示候选字体；有空格的字体名使用双（单）引号括起。示例：使用内联样式和内部样式表，按以下要求设置段落样式。样式编辑位置：内联样式：样式规则写在HTML元素开始标记的style属性中内部样式表：写在head标记之间的<style></style>标记内。外部样式表：独立的css文件，在head标记中，使用link标签引入样式文件。优先级：就近优先；内联样式（最高）>其他样式位置所有段落文字均为：使用“黑体、24px、红色”编辑位置：1.内联样式；2.内部样式表；3.外部样式表样式属性使用示例：font-family:黑体;font-size:24px;color:red;12内部样式表：通常位于head标记中。但为便于阅读，习惯写在页面底部内联样式：作为标记style属性<pstyle="font-family:黑体;font-size:24px;color:red;">

所有段落文字均为：使用黑体、24px、红色</p><!DOCTYPEhtml><html><head>

<style>p{font-family:黑体;font-size:24px;color:red;}</style></head><body><p>

所有段落文字均为：使用黑体、24px、红色

</p></body></html><head><!--引入外部样式表--><linkrel="stylesheet"href="./css/my.css"></head>使用外部样式文件：my.css注意：css样式文件内，不要使用<style></style>标记在任何需要使用样式的html文件中，

使用link标记引入样式文件示例：使用外部样式表，设置所有段落文本为粗体、斜体。my.css样式文件的内容3font-weight:bold;font-style:italic;为具有id的元素定义样式；每个HTML元素都可以使用ID标识，ID是唯一的，因此是为特定的一个元素定义样式。2.ID选择器1.为标记添加id属性；2.使用“#id”格式作为选择器来声明样式示例:使用id选择器，设置段落1样式加粗、灰色；段落2：斜体，红色。<style>

#p1{color:gray;font-weight:bold;}

#p2{color:red;font-style:italic;}</style><pid="p1">这是段落A，灰色、加粗</p><pid="p2">这是段落B，红色、斜体</p>3.类选择器不同的标记都可以使用，相当样式复用，常用1.定义样式类：使用“.(点)类名”的格式作为选择器，在内部样式表中定义样式；2.使用样式类：需要使用到该样式的标记，使用class=“类名”应用样式边框样式：1.统一设置border:宽度样式颜色；如果取值为none则取消边框。2.独立设置：border-width边框宽度:数字px---必须有宽度才能显示border-style边框样式:

solid|dotted|dashed…border-color:边框颜色border-color边框颜色：颜色值示例:设置图片和段落边框样式为2px红色；所有图片宽度为100px；所有段落宽度200px.img{border:1pxsolidblack}-

复合样式.imgborder{border-width:1px;border-style:solid;border-color:red;}

独立样式样式应用示例：width:100px;height:100px;border:1pxsolidred;<style>/*标记选择器*/img{width:100px;height:100px;}/*标记选择器*/p{width:200px;}/*样式类*/

.border{border:2pxsolidred;}</style><body><p>类样式与边框</p><imgsrc="images/1.jpg"/><imgsrc="images/2.jpg"class="border"/><pclass="border">段落使用边框</p></body>独立设置边框样式示例：border-width:2px;border-style:solid;border-color:red示例：理解样式叠加与覆盖

分析：使用多个样式类（叠加样式：字体名/大小/颜色/粗细/斜体）多个样式叠加；如果存在相同样式属性，那么位置在后面的样式覆盖前面同名样式；---有则叠加，无则覆盖<html><pclass="bold">粗体段落</p><pclass="boldred">粗体、红色段落(叠加样式)</p><pclass="boldreditalic">粗体、红色、32px斜体段落（叠加、覆盖）</p></html><style>.bold{

font-size:16px;font-weight:bold;}.red{color:red;}.italic{

font-size:32px;font-style:italic;}</style>使用空格隔开每个类样式；粗体段落粗体、红色段落(叠加样式)粗体、红色、32px斜体段落（叠加、覆盖）4.属性选择器根据标记的属性使用样式。(掌握基本语法)，a[title]{font-weight:bold;}/*具有属性表示存在*/a[title^='tip']{color:gray;}[href$='com']{color:red;}a[href*='https']{color:red；}img[alt][title]{border:1pxsolidgray;}/*需要同时满足条件，类似逻辑与的关系；注意不要有空格！！！*/已给出以下的链接<ahref=""title="baidunews">百度</a><ahref=""title="sinanews">新浪</a><ahref=""title="google">谷歌</a><ahref=""title="163news">网易</a>分析：设计样式1.href以https开头的，文本红色2.href以cn结尾的链接加粗3.为title值为baidu的链接添加边框4.title包含news标题,且href以https开头，背景色为黑色，文本为白色/*以https开头的，文本红色*/[href^='https']{color:red;}/*以cn结尾的链接加粗*/a[href$='cn']{font-weight:bold;}/*title包含baidu的加边框*/[title*='baidu']{border:1pxsolidred;}/*title包含news标题,且href以https开头，背景色为黑色，文本为白色*/

[title*='news'][href^='https']{background-color:black;color:white;}示例：具有disabled属性的按钮，前/背景色为gray/#ccc（灰色），鼠标悬停时图标为not-allowed示例：普通文本框和密码文本框显示为仅有下边框Cursor（鼠标图标）常用属性取值：pointer（手指图标）/not-allow；每个表单元素都具有disabled属性。<button>普通按钮</button><buttondisabled>不可使用按钮</button>button[disabled]{/*不要有空格，表示只限制按钮*/cursor:not-allowed;/*禁止图标*/}<p>用户名：<inputtype="text"/></p><p>密码：<inputtype="password"/></p>[type='text'],[type='password']{/*逗号表示或的关系，没有逗号表示与的关系；=号表示精确匹配*/border:none;/*先取消默认的边框*/border-bottom:1pxsolidblack;}按以下要求设计页面1.标题1”CSS介绍”，使用内联样式，32px大小，灰色；2.段落文字“来源：百度词条2010-10-22“，使用ID选择器，灰色，12px大小3.图片使用标记选择器，设置宽度为200px，高度100px；4.段落文字“内容简介”等，使用类选择器，设置背景颜色为whitesmoke,14px大小、宽度为600px；5.使用全局样式，所有文字使用“微软雅黑”字体。素材CSS介绍百度词条2010-10-22内容介绍层叠样式表(英文全称：CascadingStyleSheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。练习时刻5.伪类和微元素选择器伪类：依赖存在的元素(选择器)使其产生一定动态效果的样式类；或选择某个位置的元素(查询：p：first-child)；可以理解为元素没有显式使用class属性的类。常用于：(1)鼠标悬停效果；(2)设置指定位置元素（第几个）的样式。伪元素：将元素某部分（非整个元素）作为单独的、虚拟为HTML元素来设置样式(-主要设置元素部分样式）；或者添加不存在的元素，不能作为对象单独使用【本质：不是DOM对象，无法使用js来选择该元素---最大特征】；

常用于：添加元素伪元素一般使用::;伪类使用：示例：典型伪类hover的使用---可以运用在任何可见元素上。1.使用伪类的链接效果：鼠标悬停时，改变为加粗、红色；2.改变列表项前景和背景色

：鼠标悬停时，反色显示。1.hover伪类：典型应用，鼠标移动到元素产生的效果，鼠标离开恢复原来样式;<h3>应用于链接</h3><ahref="">链接,鼠标悬停加粗、红色</a><h3>应用其他元素，如li</h3><ul><li>项目1</li><li>项目2</li></ul><style>a:hover{font-weight:bold;color:red;}ul{list-style:none;width:200px;border:1pxsolid#ccc;}li:hover{background-color:black;color:white;}</style>对于链接，可以使用四个伪类（极少使用，了解），如果使用，则必须按照以下顺序：linkvisitedhoveractive

a:link{color:black;}a:visited{color:gray;}/*了解：是否起作用于浏览器有关；href=必须指向实际页面。edge有效*/a:hover{background-color:black;color:white;}a:active{color:red;}:nth-of-type(n):nth-of-type(odd/even)，第n个指定的元素:nth-last-of-type(n)：倒数第n个了解:first-child:last-child:nth-child(n)---第n个子元素，指定的元素必须在该位置存在，如果该位置不是该类型元素，则无效。---两者都是某个容器内。2选择位置子元素伪类：nth-of-type()示例：使用伪类，制作列表项，1.加边框线，且不重叠；2.奇数项字体为红色，偶数项字体为加粗、绿色奇数项字体为红色边框线且不重叠；

/*取消列表符号*/ul{list-style:none;width:200px;}/*全部没有下边框*/li{border:1pxsolidgray;border-bottom:none;

/*预设为加粗、绿色*/color:green;font-weight:bold;}

/*最后一个加下边框*/li:nth-last-of-type(1){border-bottom:1pxsolid#ccc;}

/*li:nth-of-type(2n+1){

奇数行*/

.li:nth-of-type(odd){color:red;font-weight:normal;}12更多的伪类，参见学习（掌握方法：思路，需要时查看资料）：/css/css-pseudo-classes.html常用伪元素1.首行：first-line；首字母：first-letter---一般应用于段落文字（了解）示例：使用伪元素，分析代码<style>#p1::first-letter{font-family:黑体;font-size:48px;color:Red}#p1::first-line{font-weight:bold;}</style>

<pid="p1">历经9个比赛日，84个项目赛事，北京2022年冬残奥会即将在全球瞩目中落下帷幕。在本届冬残奥会赛场上，我们见证了许许多多的温暖与感动。残疾人运动员用他们的友爱、勇气与坚强，为世界注入了和平、温暖与积极的能量。</p>

用法：选择器::before{content:””;/*必须有该属性*///content元素的其他样式}content内容可以想象为一个空白占位符，你无法直接改变其大小；但可以转换为块元素来设置其所有的属性.示例：典型的伪元素::before和::after的使用<ul><li>项目1前后任意元素</li><li>项目2前后任意元素</li><li>项目3前后任意元素</li></ul><style>li::before{content:'★';color:red;}常用伪元素：2.::before和::after的使用li::after{content:'☺';background-color:gray;}</style>练习时刻试一试根据前面介绍的示例完成以下样式要求：1.每个列表项加边框，且不重叠2.奇数项文本为红色，偶数项为绿色3.鼠标移够列表项反白显示4.在每个列表项的前面自动加一个黑色箭头。组合选择器多个元素同时使用同一种样式：p,h3,#p2{color:red}1.使用逗号分隔声明样式---集体选择器2.使用*，对所有元素声明样式---通配符选择器所有元素使用同一种效果*{font-size:12px;}*{box-sizing:border-box;｝3.其他组合选择器：>、空格、+、~直接子元素（>）：ul>li；[ul>*所有直接子元素，即li]后代元素(空格)：ulli[ul示例，注意字体效果继承]

第一个相邻元素（加号）：ul+p相邻元素（了解）所有相邻元素(波浪线~)：p~p（了解）分析，理解直接子元素和后代选择器的使用：li直接子元素a为红色；所有后代元素a加边框<ul><li>项目A</li><li>项目B<ahref="">直接子元素链接A</a><p><ahref="">段落中的链接B</a></p></li></ul>/*li直接子元素a为红色；所有后代元素a加边框*/li>a{color:red;}lia{border:1pxsolidgray;}<pid="p1">这是段落1</p><pid="p2">这是段落2</p><ahref="">这是链接1</a><pid="p3">这是段落3<ahref="">这是链接2</a></p><ahref="">这是链接3</a>分析，理解相邻元素、所有相邻元素选择器：p1相邻元素为红色；p1所有相邻元素反色显示<style>#p1+p{color:red;}#p1~a{background-color:black;color:white;}</style>3.CSS继承、层叠与优先级继承：通常字体样式和文本样式会继承（非绝对，例如a的颜色和h1~h6的大小），而其他不继承，例如背景、边框等。有则覆盖，无则叠加，内联优先li{color:blue;font-size:12px;}

lia{/*继承了font-size*/border:1pxsolidblack}/*被继承*/li>a{/*继承了font-size*//*叠加了边框*//*链接具有默认字体颜色*/color:red;}<ul><li>项目A<span>这是span</span><h3>这是标题3</h3><p>这是段落</p></li><li>项目B<ahref="">直接子元素链接</a>

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论