CSS基础知识
CSS的样式PPT课件
知识点精讲
知识点分析 CSS文字样式的常用属性 设置字体： 基本语法为font-family:字体1，字体2，字体3。 例如：h1{font-family:宋体，楷体，隶书;}。 设置文字大小 基本语法为font-size:尺寸|百分比|关键字。 设置斜体 基本语法为font-style:normal|italic|oblique。 设置文字粗细 基本语法为font-weight:normal|bold|bolder|lighter|number。 设置变体 基本语法为font-variant:normal|small-caps。
网站建设与管理
CSS的样式
考纲解读
1 掌握CSS的基础知识。 2 掌握CSS的属性。
考点解读
重难点分析：CSS样式表、样式选择器及CSS的属性。
知识点精讲
知识点1 CSS的基础知识 例题精讲 请输入正确的代码
【解析】外部链接样式表的声明方法为<link rel=″stylesheet″ type=″text/css″ href=″样式 表文件的地址″>
知识点精讲
巩固提高
在Dreamweaver软件中，给网站首页设置“页面属性”的具体要求如下:
网站首页中文字大小设置为12 px，文字颜色设置为“#000”。
设置网页背景颜色为“#CCC”。 设置“链接（CSS） ”中“下划线样式”为“始终无下划线”。 设置“链接（CSS）”中“链接颜色”为“#000”。 下面是网站首页的部分源代码，请从选项A~N中将正确的内容填入相应位置。
知识点精讲
CSS段落和其他文字样式属性 修饰文字 基本语法为text-decoration:underline|overline|line-through|blink|none。 设置段落的水平对齐方式 基本语法为text-align:left|right|left|justify。 颜色及背景 设置文字颜色 基本语法为color：颜色的名称|RGB值|十六进制数。 设置背景 基本语法为background:背景颜色|背景图像|背景重复|背景附件|背景位置。 设置背景颜色属性 基本语法为background-color:颜色|transparent（透明）。 设置背景图像属性 基本语法为background-image:url（背景图片的路径和名称）。
css知识全面总结
css知识全面总结嘿，朋友！今天咱们来聊聊 CSS 这玩意儿。
CSS 就像是给网页化妆的魔法颜料，能让网页变得美美的。
你想想，要是一个网页没有 CSS，那得多单调、多无聊呀！就好像一个人素颜出门，虽说也能看，但总觉得缺了点啥。
先来说说 CSS 的选择器。
这选择器啊，就像是你手里的魔法棒，指哪儿打哪儿。
比如说，“类选择器”，你给某个元素加上一个独特的类名，然后通过这个类名来控制它的样式，是不是很神奇？这就好比你在一群人中，喊出一个特定的名字，就能找到那个人，然后给他打扮打扮。
还有“ID 选择器”，这可厉害了，每个页面里 ID 得是唯一的。
它就像给网页元素颁发的独一无二的身份证，通过这个身份证，你能精准地给它设定样式。
比如说一个网页里的导航栏，你给它一个特定的ID，然后让它的颜色、字体、大小都变得与众不同。
再说说 CSS 的属性。
字体属性那可是基础中的基础，什么字体大小、字体样式、字重等等。
这就像是给文字穿上不同的衣服，有时候是休闲装（正常字体），有时候是正装（加粗字体），是不是很有趣？还有背景属性，能给网页元素换上各种背景颜色或者图片。
这就像给房间换壁纸，今天喜欢蓝色，明天喜欢粉色，随你心情！再瞧瞧边框属性，能给元素加上边框，粗细、样式、颜色随你定。
这是不是有点像给一个物品加上漂亮的框框，瞬间就高大上起来了？至于定位属性，那可真是个神奇的存在。
绝对定位、相对定位，让元素想在哪就在哪。
这就好比你在摆积木，想把哪块积木放哪儿就放哪儿，多自由！还有浮动属性，能让元素飘起来，并排排列。
这感觉就像一群小伙伴手拉手并排走，多整齐！CSS 还有盒模型呢，这可是个重要的概念。
内容、内边距、边框、外边距，就像一个盒子的里里外外，每个部分都能影响元素的最终大小和显示效果。
另外，CSS 中的媒体查询也不能忽略。
它能让网页根据不同的设备和屏幕尺寸呈现出不同的样式。
这就好比你有一件衣服，能根据不同的场合自动变换款式，是不是超厉害？总之，CSS 就像是网页的化妆师，能让网页变得丰富多彩、独具魅力。
什么是 CSS
什么是CSS？CSS（Cascading Style Sheets）是一种用于描述网页样式和布局的样式表语言。
它与HTML结合使用，为网页提供外观和样式的控制。
CSS通过选择器和属性来选择和定义网页中的元素，使得开发人员可以轻松地改变网页的外观、布局和交互效果。
以下是CSS的一些关键概念和特点：1. 样式表：CSS是一种样式表语言，用于定义网页元素的外观和布局。
样式表由一系列的规则组成，每个规则由选择器和一组样式属性构成。
2. 选择器：CSS使用选择器来选择网页中的元素，并将样式应用于这些元素。
选择器可以根据元素的标签名、类名、ID、属性等进行匹配。
例如，选择器`p`选择所有的段落元素，选择器`.class`选择所有具有特定类名的元素。
3. 样式属性：CSS使用属性来描述元素的外观和布局。
属性定义了元素的颜色、字体、大小、边框、间距等方面的样式。
例如，属性`color`定义了元素的文本颜色，属性`font-size`定义了元素的字体大小。
4. 层叠和继承：CSS的名称中包含了"层叠"（Cascading）一词，表示样式的层叠和优先级规则。
当多个样式规则应用于同一个元素时，CSS使用层叠规则来确定最终的样式。
此外，CSS 中还存在继承的概念，某些样式属性可以从父元素继承到子元素。
5. 盒模型：CSS中的盒模型用于描述元素的布局。
每个元素都被视为一个矩形盒子，其包括内容区域、内边距、边框和外边距。
开发人员可以通过设置盒模型相关的属性来控制元素的大小和间距。
6. 响应式设计：CSS可以用于实现响应式设计，即根据不同设备和屏幕尺寸自动调整和适应网页的布局和样式。
通过使用CSS媒体查询或CSS框架，可以根据设备的特性和屏幕尺寸应用不同的样式。
7. CSS预处理器：CSS预处理器是一种将类似编程语言的语法引入CSS的工具。
它们增加了变量、嵌套规则、函数、导入等功能，使得CSS的编写更加灵活和可维护。
css常用语法
1、页面中，所有的CSS代码，需要写入到<style></style>标签中。
style标签的type属性应该选择text/css2、CSS 注释CSS修改页面中的所有标签，必须借助选择器选中。
选择器中，可以写多对CSS属性，用{}包裹：每个属性名与属性值之间用:分隔，多对属性之间，必须用;分隔。
3、【CSS常用选择器】①标签选择器写法：HTML标签名{}作用：可以选中页面中，所有与选择器同名的HTML标签。
②类选择器(class选择器)写法：.class名{}调用：在需要调用选择器样式的标签上，使用class="class 名"调用选择器优先级：>标签选择器③ID 选择器写法：#ID名{}调用：需要调用样式的标签，起一个id="ID名"优先级：ID选择器>class选择器注意：一个页面中，不能出现同名ID【Class选择器与ID选择器的区别】写法不同:class选择器用.声明，ID选择器用#声明；优先级不同：ID选择器>class选择器作用范围不同：class选择器可以多次调用，ID选择器只能使用一次。
【选择器的命名规范】只能有字母、数字、下划线、减号组成；开头不能是数字。
也不能是只有一个减号。
一般，起名要求有语义，使用英文单词与数字的组合。
④通用选择器写法：*{}作用：可以选中页面中所有的HTML标签。
优先级：最低！！！⑤并集选择器写法：选择器1,选择器2,……,选择器n{}生效规则：多个选择器取并集，只要标签满足其中任意一个选择器，样式即可生效。
⑥交集选择器写法：选择器1选择器2……选择器n{} 所有选择器紧挨着，没有分隔生效规则：多个选择器取交集，则必须满足所有选择器的要求，才能生效⑦后代选择器写法：选择器1 选择器2 ……选择器n{} 选择器之间空格分隔生效规则：只要满足，后一选择器是前一个选择器的后代，即可成效。
css教程菜鸟
css教程菜鸟CSS（层叠样式表）是一种用于描述网页上的元素布局和样式的语言，它能够使网页更加美观和易于阅读。
本文将介绍一些CSS的基础知识和常用属性，以帮助菜鸟入门。
首先，让我们了解一下CSS的基本语法。
CSS由选择器和声明块组成。
选择器指定了要应用样式的HTML元素，而声明块则包含了一系列属性-值对，用于描述要应用到元素上的样式。
下面是一个简单的示例：```p {color: red;font-size: 20px;}```上述代码中，选择器“p”表示要应用样式的HTML段落元素。
声明块中的属性-值对指定了段落的文本颜色为红色，字体大小为20像素。
接下来，我们将介绍一些常用的CSS属性。
1. 字体属性：用于设置文本的字体样式，如字体大小、字体族等。
例如：```p {font-size: 16px;font-family: Arial, sans-serif;}```上述代码将段落的字体大小设置为16像素，字体族为Arial或者sans-serif。
2. 背景属性：用于设置元素的背景样式，如背景颜色、背景图片等。
例如：```body {background-color: lightblue;background-image: url("bg.jpg");}```上述代码将页面的背景颜色设置为浅蓝色，背景图片为名为“bg.jpg”的图片。
3. 边框属性：用于设置元素的边框样式，如边框宽度、边框颜色等。
例如：```div {border: 1px solid black;}```上述代码将`<div>`元素的边框宽度设置为1像素，边框颜色为黑色。
4. 盒模型属性：用于调整元素的尺寸和定位，如元素的宽度、高度、外边距等。
例如：```img {width: 200px;height: 150px;margin-top: 10px;}```上述代码将图片的宽度设置为200像素，高度设置为150像素，并且向上外边距10像素。
CSS知识点总结
CSS知识点总结⼀．Css分类1.替代replaced elements:img input(radio button, checkbox, text)不可替代nonreplaces elements:html,xhtml,span,a,div,body,form,p,em,strong,2.block-level and inline-level:(block可以包含inline 元素，反过来是不可以的！) block-level:p div li ulinline-level: a span strong em b i u⼆．选择器2.元素选择器：P{}3. Grouping Selectors(分组)eg:h2, p {color: gray;}4.The universal selector（通配选择器）eg:* {color: red;}5. Grouping Declarationseg:h1 {font: 18px Helvetica; color: purple; background: aqua;}6.类选择器：.ddd7.ID选择器：#ddd8.属性选择器简单属性选择h1[class] {color: silver;}根据具体属性值p[class="warning"] {font-weight: bold;}根据部分属性值选择p[class~="warning"] {font-weight: bold;}⼦串匹配属性选择器[foo^="bar"][foo$="bar"][foo*="bar"]特定属性选择类型*[lang|="en"] {color: white;}9.使⽤⽂档结构后代选择器blockquote b, p b {color: gray;}选择⼦元素h1 > strong {color: red;}选择相邻兄弟元素h1 + p {margin-top: 0;}10.伪类选择器静态伪类：a:visited{}a:link{}(好像⽤不了)动态伪类：a:focus{}(常⽤于input元素)a:hover{}a:active{}选择第⼀个⼦元素：Li:first-child{}根据语⾔选择（）*:lang(fr){}结合伪类：link:hover:active {color: orange;}伪元素选择器：设置⾸字母样式li:first-letter{ color:Red;设置第⼀⾏的样式：.aa:first-line{ color:Purple;}设置之前和之后元素的样式：a:before{ content:"{}"; color:Silver;}a:after{ content:"end"; color:Aqua;}三．结构和层叠1.特殊性：重要性：!Important (最强悍！) eg: p.dark {color: #333 !important; background: white;}内联样式特殊性：1000 ID选择器：0100 li#answer {color: navy;} /* 0,1,0,1 (winner) */类属性值，属性选择或伪类：0010 h2.grape{color: purple;}/* 0,0,1,1 (winner)*元素和伪元素：0001 h1 {color: red;} /* 0,0,0,1 */通配选择器：0000结合符:⽆继承：⽆（0特殊性⽐⽆特殊性的更强）Eg: * {color: gray;} (（当h1中有其他元素时win）h1#page-title {color: black;}2.继承a)Border：没有继承b)Body:可以向上继承到html,其他的都是向下继承3.层叠：具有相同特殊性的靠后的权重⼤按权重和来源排序：（p79）读者的重要声明>创作⼈员的重要声明>创作⼈员的正常声明>读者正常>⽤户代理声明按特殊性排序按顺序排序Lvha顺序⽐较重要：即live visited hover active四．值和单位1.数字2.百分数3.颜⾊命名颜⾊：blue green white red black maroon ...⽤GRB指定颜⾊函数式RGB颜⾊(百分数法：0%-100%，数字法：0-255)Eg:rgb(100%,100%,100%)rgb(0%,0%,0%)rgb(255,255,255)rgb(0,0,0)灰度表：p.one {color: rgb(0%,0%,0%);}p.two {color: rgb(20%,20%,20%);}p.three {color: rgb(40%,40%,40%);}p.four {color: rgb(60%,60%,60%);}p.five {color: rgb(80%,80%,80%);}p.six {color: rgb(0,0,0);}p.seven {color: rgb(51,51,51);}p.eight {color: rgb(102,102,102);}p.nine {color: rgb(153,153,153);}p.ten {color: rgb(204,204,204);}25%*255=63.75=64⼗六进制RGB颜⾊Web颜⾊：rgb值20%和52和33（⼗六进制）整除4.长度单位a)绝对长度单位：in,cm,mm,pt(点),pc（派卡）1in=2.54cm 1cm=0.3394in1 in=72pt 1 in=6pcB) 相对长度单位Em和ex:Px:1em=14px 1em=2exEm最好的度量单位5.URL绝对URL相对URL注意：url和开始括号之间不能有空格6.关键字None:不同于0，Inherit:它的属性值和⽗元素相同7.css2单位：p(110)a)⾓度值：deg, grad 和 radb)时间值：s,ms 1000ms=1sc)频率值：hz,mhz五．字体1.字体系列制定字体系列：p {font-family: TimesNR,serif;}p {font-family: Times,TimesNR,'New Century Schoolbook',Georgia,'New York',serif;} 有空格、包括“#”和”$”的时候加“单引号”Cursive必须加“双引号”2.字体加粗a)Font-weight:bold bolder mormal 100 --900 lighterb)相对⼤⼩关键字:Bolder 是相对于⽗级字体粗细⽽⾔3.字体⼤⼩a)Font-size:xx-small x-small small medium large x-large xx-large smaller larger inheritb)相对⼤⼩关键字：larger smallerc)绝对⼤⼩：xx-small x-small small medium large x-large xx-larged)百分数：根据⽗元素继承的⼤⼩来计算strong {font-weight: lighter; font-size:larger;}strong b {font-weight:lighter; font-size:200%;}4.风格和变形a)字体风格：Font-style:italic oblique normal inheritb)字体变形：font-variant:small-caps normal inherit（只对英⽂有⽤，对汉语没有影响）c)转换⼤⼩写：p{ text-transform:uppercase;}5.拉伸和调整字体a)字体拉伸：font-stretch:normal| wider | narrower | ultra-condensed | exTRa-condensed| condensed| semi-condensed| semi-expanded| expanded| exTRa-expanded| ultra-expanded | inheritb)我的浏览器不⽀持（可以忽略）6.Font属性a)等价：h1{ font-style:inherit; font-weight:bold; font-variant:small-caps; font-size：20px; font-family:Candara,Corbel;}h1{ font:inherit bold small-caps20px Candara,Corbel; }b)注意;前两个可以互换，后两个不可以，normal 可以省略c)增加⾏⾼：line-height,Eg：body {font-size: 12px;}h1 {font: bold italic200%/1.2Verdana,Helvetica,Arial,sans-serif;}7.字体匹配六．⽂本属性1.缩进和⽔平对齐a)缩进⽂本：(只能⽤于块级元素！)text-indent:3em 10%b)⽔平对齐：(只能⽤于块级元素！)text-align:left center right justify(两端对齐⽂本) inherit2.垂直对齐：元素中⽂本基线之间的最⼩距离a)Line-height:”line-height”减去“font-size”等于⾏间距i.Line-height:18px,0.33in,150%,1.5emii.适⽤于所有元素iii.⾏⾼和继承：Line-height值从⽗元素继承时，要从⽗元素计算，⽽不是⼦元素上计算。
ch_10网页设计- CSS的基础知识091
CSS 是 Cascading Style Sheet 的缩写.译 的缩写. 层叠样式表单」. 作「层叠样式表单」. 是用于控制网页元素的显示方式 是用于控制网页元素的显示方式 样式表的宗旨就是将结构(内容 和格式分 样式表的宗旨就是将结构 内容)和格式分 内容 离 CSS也是一种标记语言,有很多属性来源 也是一种标记语言, 也是一种标记语言 于HTML,它也需要通过浏览器解释执行. ,它也需要通过浏览器解释执行.
例10-1:建立一个简单的样式表 : <html> <head><title>简单的样式表 简单的样式表</title> 简单的样式表 <style type="text/css"> <!-h1{color:red;font-size:35px;font-family:黑体 黑体} 黑体 p{background:yellow;color:blue;font-size:25px;font-family:隶书 隶书} 隶书 --> </head> <body bgcolor=lightblue> <center><h1>样式表 样式表</h1> 样式表 <p>这是一个简单的样式表 这是一个简单的样式表</p> 这是一个简单的样式表 </center> </body></html> </style>
10.3.1内联样式 10.3.1内联样式
样式可以使用STYLE属性内联. 属性内联. 样式可以使用 属性内联 STYLE属性可以应用于任意 属性可以应用于任意BODY内的 内的 属性可以应用于任意 HTML元素 包括 元素(包括 本身), 元素 包括BODY本身 ,除了 本身 BASEFONT,PARAM和SCRIPT. , 和 . 其语法如下: 其语法如下: <HTML标签名称 style="样式属性 属性 标签名称 样式属性:属性 样式属性 样式属性:属性值 属性值..."> 值;样式属性 属性值
第12讲、CSS基础知识及设置
七、小结
•
本章主要介绍层叠样式表的概念、样 式表的种类及样式的应用。
练习
• 利用CSS样式对4.3.2.html内容进行格式化 使得到如4.3.2(result).html效果。
• 使用外部(Extenal)样式表，相对于内嵌(Inline)和 内部式 (Internal)的，有以下优点： • CSS的最大特点就是将内容和格式分离。一个外 部CSS文件，可以被很多网页共用。 • 便于修改。如果要修改样式，只需要修改CSS文 件，而不需要修改每个网页。 • 显示示例，有以下优点：提高网页显示的速度。 如果样式写在网页里。 • 提高网页显示的速度。如果样式写在网页里，会 降低网页显示的速度，如果网页引用一个CSS文 件，这个CSS文件多半已经在缓存区(其它网页 早已经引用过它)，网页显示的速度就比较快。
• • • • • • • • • •
然后你建立一个网页，代码如下： <HTML> <HEAD> <link href="../asdocs/css_tutorials/home.css" rel="stylesheet" type="text/css"> </HEAD> <BODY> <H1 class="mylayout"> 这个标题使用了Style。</H1> <H1>这个标题没有使用Style。</H1> </BODY> </HTML>
• 2）打开并设置“链接页面属性”选项窗口。
• • • •
字体 指定链接文本使用的默认字体。 大小 指定链接文本使用的默认的字体大小。 链接颜色 指定应用于链接文本的颜色。 已访问链接的颜色 指定应用于访问过的链接的颜 色。 • 鼠标经过时链接的颜色 指定当鼠标（或指针）位 于链接上时应用的颜色。 • 活动链接的颜色 指定当鼠标（或指针）在链接上 单击时应用的颜色。 • 下划线样式 指定scading Style Sheet),中文译为层叠样 式表，它是用于控制网页样式并允许将样式信息 和网页内容分离的一种标记性语言。 • CSS是1996年由W3C审核通过，并且推荐使用的。 简单的说，CSS的引入就是为了使HTML语言更好 地适应页面的美工设计。它以HTML为基础，提供 了更丰富的格式化功能，如字体、颜色、背景和 整体排版等。