包小盒设计网站,济南做网站最好的公司,做网站设计和推广,阳江新闻第3章-CSS层叠样式表基础
学习目标(Objective)
掌握标签选择器的使用掌握类选择器的使用了解id选择器和通配符选择器掌握font属性和color属性的应用
1.HTML的局限性
如果要改变下高度或者变一个颜色#xff0c;就需要大量重复操作 总结#xff1a; HTML满足不了设计者的需…第3章-CSS层叠样式表基础
学习目标(Objective)
掌握标签选择器的使用掌握类选择器的使用了解id选择器和通配符选择器掌握font属性和color属性的应用
1.HTML的局限性
如果要改变下高度或者变一个颜色就需要大量重复操作 总结 HTML满足不了设计者的需求 操作html属性不方便 HTML里面添加样式带来的是无尽的臃肿和繁琐
2.CSS 网页的美容师 让我们的网页更加丰富多彩布局更加灵活自如。 CSS的最大贡献就是 让 HTML 从样式中脱离 实现了 HTML 专注去做结构呈现样式交给css
3.CSS初识 概念CSS(Cascading Style Sheets) 通常称为CSS样式表或层叠样式表级联样式表 作用 主要用于设置 HTML页面中的文本内容字体、大小、对齐方式等、图片的外形宽高、边框样式、边距等以及布局和外观显示样式。提供了丰富的功能如字体、颜色、背景的控制及整体排版等而且还可以针对不同的浏览器设置不同的样式。
4. 引入CSS样式表
4.1 行内式内联样式
是通过标签的style属性来设置元素的样式标签名 style属性1:属性值1; 属性2:属性值2; 属性3:属性值3; 内容 /标签名实际上任何HTML标签都拥有style属性用来设置行内式。
div stylecolor: red; font-size: 12px;比屋出品 必属精品/div 缺点 没有实现样式和结构相分离
4.2 内部样式表内嵌样式表 其基本语法格式如下
head
style typetext/CSS选择器选择的标签 {属性1: 属性值1;属性2: 属性值2; 属性3: 属性值3;}
/style
/head案例 typetext/css 在html5中可以省略。只能控制当前的页面,没有彻底分离
stylediv {color: red;font-size: 12px;}
/style
4.3 综合案例 思考 1. 如何实现结构与样式完全分离 2. 如何实现css样式共享
4.4 外部样式表外链式 其基本语法格式如下
将所有的样式放在一个或多个以**.CSS**为扩展名的外部样式表文件中通过link标签将外部样式表文件链接到HTML文档中
headlink relstylesheet typetext/css hrefcss文件路径
/head 注意 link 是个单标签 link标签需要放在head头部标签中并且指定link标签的三个属性
属性作用rel定义当前文档与被链接文档之间的关系在这里需要指定为“stylesheet”表示被链接的文档是一个样式表文件。type定义所链接文档的类型在这里需要指定为“text/CSS”表示链接的外部文件为CSS样式表。我们都可以省略href定义所链接外部样式表文件的URL可以是相对路径也可以是绝对路径。 4.5 三种样式表总结位置
样式表优点缺点使用情况控制范围行内样式表书写方便权重高没有实现样式和结构相分离较少控制一个标签少内部样式表部分结构和样式相分离没有彻底分离较多控制一个页面中外部样式表完全实现结构和样式相分离需要引入最多强烈推荐控制整个站点多
5. 代码风格
样式书写一般有两种 一种是紧凑格式 (Compact)
h3 { color: deeppink;font-size: 20px;} 一种是展开格式推荐
h3 {color: deeppink;font-size: 20px;
}
6. 总结CSS样式规则
使用HTML时需要遵从一定的规范。CSS亦如此要想熟练地使用CSS对网页进行修饰首先需要了解CSS样式规则
具体格式如下 7 CSS选择器重点
1. CSS选择器作用重点 选择器的作用找到满足条件的HTML页面元素
div {color: red;
}1. 这段代码就是2件事 把div选出来 然后 把它变成了红色。 以后我们都这么干。
2. 选择器分为基础选择器和 复合选择器我们这里先讲解一下 基础选择器。
2. CSS基础选择器
2.1 标签选择器
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 作用标签选择器 可以把某一类标签全部选择出来 优点是能快速为页面中同类型的标签统一样式 缺点不能设计差异化样式。
2.2 类选择器 基本语法
.类名 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3;
} 优点 可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签
课堂案例
span stylebackground-color:#f8f8f8span stylecolor:#333333headmeta charsetutf-8style.blue {color: blue;font-size: 100px;}.red {color: red;font-size: 100px;}.orange {color: orange;font-size: 100px;}.green {color: green;font-size: 100px;}/style/headbodyspan classblueG/spanspan classredo/spanspan classorangeo/spanspan classblueg/spanspan classgreenl/spanspan classrede/span/body/span/span
2.3 类选择器特殊用法- 多类名
我们可以给标签指定多个类名从而达到更多的选择目的。 注意 各个类名中间用空格隔开。 多类名选择器在后期布局比较复杂的情况下还是较多使用的。
2.4 id选择器 其基本语法格式如下 span stylebackground-color:#f8f8f8p idid名/pid选择器使用#进行标识后面紧跟id名
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }/span W3C标准规定在同一个页面内不允许有相同名字的id对象出现但是允许相同名字的class。 类选择器好比人的名字 是可以多次重复使用的 id选择器好比人的身份证号码具备唯一性
2.5 通配符选择器 其基本语法格式如下
通配符选择器用*号表示 * 就是 选择所有的标签* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
例如下面的代码使用通配符选择器定义CSS样式清除所有HTML标记的默认边距。
* {margin: 0; /* 定义外边距*/padding: 0; /* 定义内边距*/
} 注意会匹配页面所有的元素降低页面响应速度不建议随便使用
2.7 基础选择器总结
选择器作用缺点使用情况用法标签选择器可以选出所有相同的标签比如p不能差异化选择较多p { colorred;}类选择器可以选出1个或者多个标签可以根据需求选择非常多.nav { color: red; }id选择器一次只能选择器1个标签只能使用一次不推荐使用#nav {color: red;}通配符选择器选择所有的标签选择的太多有部分不需要不推荐使用* {color: red;}
8. CSS字体样式属性调试工具
1.font字体
1.1 font-size:大小 作用font-size属性用于设置字号
p { font-size:20px;
} 单位 相对长度单位比较常用推荐使用像素单位px绝对长度单位使用较少。 注意 我们文字大小以后基本就用px了其他单位很少使用 谷歌浏览器默认的文字大小为16px 但是不同浏览器可能默认显示的字号大小不一致我们尽量给一个明确值大小不要默认大小。一般给body指定整个页面文字的大小
1.2 font-family:字体 作用font-family属性用于设置哪一种字体。
p{ font-family:微软雅黑;} 网页中常用的字体有宋体、微软雅黑、黑体等例如将网页中所有段落文本的字体设置为微软雅黑 可以同时指定多个字体中间以逗号隔开表示如果浏览器不支持第一个字体则会尝试下一个直到找到合适的字体 如果都没有则以我们电脑默认的字体为准。
p{font-family: Arial,Microsoft Yahei, 微软雅黑;}1. 各种字体之间必须使用英文状态下的逗号隔开。
2. 中文字体需要加英文状态下的引号英文字体一般不需要加引号。当需要设置英文字体时英文字体名必须位于中文字体名之前。
3. 如果字体名中包含空格、#、$等符号则该字体必须加英文状态下的单引号或双引号例如font-family: Times New Roman;。
4. 尽量使用系统默认字体保证在任何用户的浏览器中都能正确显示。
1.3 font-weight:字体粗细 在html中如何将字体加粗我们可以用标签来实现 使用 b 和 strong 标签是文本加粗。 可以使用CSS 来实现但是CSS 是没有语义的。
属性值描述normal默认值不加粗的bold定义粗体加粗的
1.4 font-style:字体风格 在html中如何将字体倾斜我们可以用标签来实现 字体倾斜除了用 i 和 em 标签 可以使用CSS 来实现但是CSS 是没有语义的
font-style属性用于定义字体风格如设置斜体、倾斜或正常字体其可用属性值如下
属性作用normal默认值浏览器会显示标准的字体样式 font-style: normal;italic浏览器会显示斜体的字体样式。
1.5 font:综合设置字体样式 (重点)
font属性用于对字体样式进行综合设置 基本语法格式如下
选择器 { font: font-style font-weight font-size/line-height font-family;} 注意 使用font属性时必须按上面语法格式中的顺序书写不能更换顺序各个属性以空格隔开。 其中不需要设置的属性可以省略取默认值但必须保留font-size和font-family属性否则font属性将不起作用。
1.6 font总结
属性表示注意点font-size字号我们通常用的单位是px 像素一定要跟上单位font-family字体实际工作中按照团队约定来写字体font-weight字体粗细记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位font-style字体样式记住倾斜是 italic 不倾斜 是 normal 工作中我们最常用 normalfont字体连写1. 字体连写是有顺序的 不能随意换位置 2. 其中字号 和 字体 必须同时出现
9. CSS外观属性
9.1 color:文本颜色 作用color属性用于定义文本的颜色 其取值方式有如下3种
表示表示属性值预定义的颜色值redgreenblue还有我们的御用色 pink十六进制#FF0000#FF6600#29D794RGB代码rgb(255,0,0)或rgb(100%,0%,0%) 注意我们实际工作中 用 16进制的写法是最多的
9.2 text-align:文本水平对齐方式 作用text-align属性用于设置文本内容的水平对齐相当于html中的align对齐属性 其可用属性值如下
属性解释left左对齐默认值right右对齐center居中对齐
9.3 line-height:行间距 作用line-height属性用于设置行间距就是行与行之间的距离即字符的垂直间距一般称为行高。 单位 line-height常用的属性值单位有三种分别为像素px相对值em和百分比%实际工作中使用最多的是像素px
9.4 text-indent:首行缩进 作用text-indent属性用于设置首行文本的缩进 属性值 其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%允许使用负值, 建议使用em作为设置单位。
1em 就是一个字的宽度 如果是汉字的段落 1em 就是一个汉字的宽度
p {/*行间距*/line-height: 25px;/*首行缩进2个字 em 1个em 就是1个字的大小*/text-indent: 2em; }
9.5 text-decoration 文本的装饰
text-decoration 通常我们用于给链接修改装饰效果
值描述none默认。定义标准的文本。 取消下划线最常用underline定义文本下的一条线。下划线 也是我们链接自带的常用overline定义文本上的一条线。不用line-through定义穿过文本下的一条线。不常用
9.6 CSS外观属性总结
属性表示注意点color颜色我们通常用 十六进制 比如 而且是简写形式 #fffline-height行高控制行与行之间的距离text-align水平对齐可以设定文字水平的对齐方式text-indent首行缩进通常我们用于段落首行缩进2个字的距离 text-indent: 2em;text-decoration文本修饰记住 添加 下划线 underline 取消下划线 none
10.开发者工具chrome
此工具是我们的必备工具以后代码出了问题
我们首先第一反应就是 “按F12”或者是 “shiftctrli” 打开 开发者工具。 菜单 右击网页空白出---检查 ctrl滚轮 可以 放大开发者工具代码大小。 左边是HTML元素结构 右边是CSS样式。 右边CSS样式可以改动数值和颜色查看更改后效果。 ctrl 0 复原浏览器大小
11. 综合案例
