企业网站设计教程,天猫商城在线购物,比较好的h5制作软件,南宁网站建设团队一、简介
1、HTML局限性
HTML只关注内容的语义#xff0c;但是丑#xff01;
2、CSS概要
CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称#xff0c;有时我们也会称之为 CSS 样式表或级联样式表。
CSS 是也是一种标记语言
CSS 主要用于设置 HTML 页面中的文本内…一、简介
1、HTML局限性
HTML只关注内容的语义但是丑
2、CSS概要
CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称有时我们也会称之为 CSS 样式表或级联样式表。
CSS 是也是一种标记语言
CSS 主要用于设置 HTML 页面中的文本内容字体、大小、对齐方式等、图片的外形宽高、边框样式、边距等以及版面的布局和外观显示样式。
由 HTML 专注去做结构呈现样式交给 CSS即 结构 ( HTML ) 与样式( CSS ) 相分离
3、CSS语法规范
CSS 规则由两个主要的部分构成选择器以及一条或多条声明。
h1 {color: red;font-size: 25px;
}选择器是用于指定 CSS 样式的 HTML 标签花括号内是对该对象设置的具体样式属性和属性值以“键值对”的形式出现属性是对指定的对象设置的样式属性例如字体大小、文本颜色等属性和属性值之间用英文“:”分开多个“键值对”之间用英文“;”进行区分
所有的样式都包含在 style 标签内表示是样式表。style 一般写到 /head 上方。
headstyleh4 {color: blue;font-size: 100px;}/style
/head4、CSS代码风格
样式格式书写展开格式
样式大小写风格样式选择器属性名属性值关键字全部使用小写字母
样式空格风格属性值前面冒号后面保留一个空格、选择器标签和大括号中间保留空格
二、基础选择器
1、选择器作用
区分并选择标签
2、选择器分类
选择器分为基础选择器和复合选择器两个大类
基础选择器是由单个选择器组成的
3、标签选择器
标签选择器是用 HTML 标签名称作为选择器按标签名称分类
h1 {color: red;
}4、类选择器
类选择器在 HTML 中以 class 属性表示在 CSS 中类选择器以一个点“.”号显示。一个标签可以有多个名字空格隔开。
div class‘red’ 变红色 /div.red {color: red;
}样式点定义结构类调用。一个或多个开发最常用 5、id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML 元素以 id 属性来设置 id 选择器CSS 中 id 选择器以“# 来定义。
div id‘red’ 变红色 /div#red {color: red;
}id 属性只能在每个 HTML 文档中出现一次。 样式#定义结构id调用只能调用一次别人切勿使用 6、通配符选择器
通配符选择器使用“*”定义它表示选取页面中所有元素标签。
* {margin: 0;padding: 0;
}三、字体属性
1、字体系列
CSS 使用 font-family 属性定义文本的字体系列
div {font-family: Arial,Microsoft Yahei, 微软雅黑;
}各种字体之间必须使用英文状态下的逗号隔开
一般情况下,如果有空格隔开的多个单词组成的字体加引号。
尽量使用系统默认自带字体保证在任何用户的浏览器中都能正确显示
2、字体大小
CSS 使用 font-size 属性定义字体大小。
px像素大小是我们网页的最常用的单位
谷歌浏览器默认的文字大小为16px。不同浏览器可能默认显示的字号大小不一致我们尽量给一个明确值大小不要默认大小可以给 body 指定整个页面文字的大小
3、字体粗细
CSS 使用 font-weight 属性设置文本字体的粗细。
属性值描述normal默认值bold粗体100~900normal400bold700
4、文字样式
CSS 使用 font-style 属性设置文本的风格
属性值描述normal默认值italic斜体
很少使用斜体反而要给em,i改为不倾斜
5、字体复合属性
字体属性可以把以上文字样式综合来写, 这样可以更节约代码
body { font: [font-style] [font-weight] font-size[/line-height] font-family;
}使用 font 属性时必须按上面语法格式中的顺序书写不能更换顺序并且各个属性间以空格隔开
不需要设置的属性可以省略取默认值但必须保留 font-size 和 font-family 属性否则 font 属性将不起作用。
四、文本属性
1、文本颜色
color 属性用于定义文本的颜色。
表示方式属性值预定义的颜色red、green、blue、pink十六进制#FF0000RGB代码rgb(255,0,0) 或者 rgb(100%,100%,100%)
开发中最常用的是十六进制
2、对齐文本
text-align 属性用于设置元素内文本内容的水平对齐方式。
属性值解释left左对齐默认right右对齐center居中对齐
3、装饰文本
text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。
属性值描述none无默认underline下划线overline上划线line-through删除线
4、文本缩进
text-indent 属性用来指定文本的第一行的缩进通常是将段落的首行缩进。
em 是一个相对单位就是当前元素font-size1 个文字的大小如果当前元素没有设置大小则会按照父元素的 1 个文字大小
div { text-indent: 10px;
}p { text-indent: 2em;
}5、行间距
line-height 属性用于设置行间的距离行高。可以控制文字行与行之间的距离. 五、CSS引入方式
1、内部样式表
内部样式表内嵌样式表是写到html页面内部. 是将所有的 CSS 代码抽取出来单独放到一个 style 标签中
style
h4 {color: blue;font-size: 100px;
}
/stylestyle 标签理论上可以放在 HTML 文档的任何地方但一般会放在文档的head标签中。代码结构清晰但是并没有实现结构与样式完全分离
使用内部样式表设定 CSS通常也被称为嵌入式引入这种方式是练习时常用的方式
2、行内样式表
行内样式表内联样式表是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式
div stylecolor: red; font-size: 12px;青春不常在抓紧谈恋爱/divstyle 其实就是标签的属性在双引号中间写法要符合 CSS 规范
可以控制当前的标签设置样式
由于书写繁琐并且没有体现出结构与样式相分离的思想所以不推荐大量使用只有对当前元素添加简单样式的时候可以考虑使用使用行内样式表设定 CSS通常也被称为行内式引入
3、外部样式表
新建一个后缀名为 .css 的样式文件把所有 CSS 代码都放入此文件中。在 HTML 页面中使用link 标签引入这个文件。
link relstylesheet hrefcss文件路径使用外部样式表设定 CSS通常也被称为外链式或链接式引入这种方式是开发中常用的方式
六、浏览器调试工具
Ctrl滚轮 可以放大开发者工具代码大小。
左边是 HTML 元素结构右边是 CSS 样式。
右边 CSS 样式可以改动数值左右箭头或者直接输入和查看颜色。
Ctrl 0 复原浏览器大小。
如果点击元素发现右侧没有样式引入极有可能是类名或者样式引入错误。
如果有样式但是样式前面有黄色叹号提示则是样式属性书写错误。
七、复合选择器
1、后代选择器
后代选择器选择父元素里面子元素
写法把外层标签写在前面内层标签写在后面中间用空格分隔。当标签发生嵌套时内层标签就成为外层标签的后代。
ul li { 样式声明 } /* 选择 ul 里面所有的 li标签元素 */元素1 和 元素2 中间用空格隔开元素1 是父级元素2 是子级最终选择的是元素2元素2 可以是儿子也可以是孙子等只要是元素1 的后代即可元素1 和 元素2 可以是任意基础选择器
2、子选择器
子元素选择器子选择器只能选择作为某元素的最近一级子元素。亲儿子元素
div p { 样式声明 } /* 选择 div 里面所有最近一级 p 标签元素 */元素1 和 元素2 中间用 大于号 隔开元素1 是父级元素2 是子级最终选择的是元素2元素2 必须是亲儿子
3、并集选择器
并集选择器可以选择多组标签, 同时为他们定义相同的样式。通常用于集体声明。通过英文逗号,连接而成任何形式的选择器都可以作为并集选择器的一部分。
ul,div { 样式声明 } /* 选择 ul 和 div标签元素 */元素1 和 元素2 中间用逗号隔开逗号可以理解为和的意思并集选择器通常用于集体声明
4、链接伪类选择器
伪类选择器用于向某些选择器添加特殊的效果
伪类选择器书写最大的特点是用冒号:表示比如 :hover 、 :first-child 。
链接伪类选择器注意事项
为了确保生效请按照 LVHA 的循顺序声明 :link:visited:hover:active。记忆法love hate 或者 lv 包包 hao 。因为 a 链接在浏览器中具有默认样式所以我们实际工作中都需要给链接单独指定样式。
/* a 是标签选择器 所有的链接 */
a { color: gray;
}/* :hover 是链接伪类选择器 鼠标经过 */
a:hover { color: red; /* 鼠标经过的时候由原来的 灰色 变成了红色 */
}6、:focus 伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标一般情况 input 类表单元素才能获取因此这个选择器也主要针对于表单元素
input:focus { background-color:yellow;
}八、元素显示模式
1、块元素
常见的块元素有h1~h6、p、div、ul、ol、li等其中 div 标签是最典型的块元素
特点
比较霸道自己独占一行。高度宽度、外边距以及内边距都可以控制。宽度默认是容器父级宽度的100%。是一个容器及盒子里面可以放行内或者块级元素。
注意
文字类的元素内不能使用块级元素p 标签主要用于存放文字因此 p 里面不能放块级元素特别是不能放divh1~h6等都是文字类块级标签里面也不能放其他块级元素
2、行内元素
常见的行内元素有 a、strong、b、em、i、del、s、ins、u、span等其中span标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
特点
相邻行内元素在一行上一行可以显示多个。高、宽直接设置是无效的。默认宽度就是它本身内容的宽度。行内元素只能容纳文本或其他行内元素。
注意
链接里面不能再放链接特殊情况链接 a 里面可以放块级元素但是给 a 转换一下块级模式最安全
3、行内块元素
在行内元素中有几个特殊的标签 img /、input /、td它们同时具有块元素和行内元素的特点。称它们为行内块元素。
特点
和相邻行内元素行内块在一行上但是他们之间会有空白缝隙。一行可以显示多个行内元素特点。默认宽度就是它本身内容的宽度行内元素特点。高度行高、外边距以及内边距都可以控制块级元素特点
4、元素显示模式转换
一个模式的元素需要另外一种模式的特性
转换为块元素display:block;
转换为行内元素display:inline;
转换为行内块display: inline-block;
5、单行文字垂直居中
让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中
九、背景
1、背景颜色
一般情况下元素背景颜色默认值是 transparent透明我们也可以手动指定背景颜色为透明色。
p {background-color: pink;
}div {background-color: transparent;
}2、背景图片
background-image 属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置
div {background-image : none;
}p {background-image : url(https://rexhao.work/medias/logo.png);
}注意背景图片后面的地址千万不要忘记加 URL 同时里面的路径不要加引号。 3、背景平铺
background-repeat: repeat | no-repeat | repeat-x | repeat-y参数作用repeat背景图像在纵向和横向上平铺默认no-repeat背景图便不平铺repeat-x背景图像在横向上平铺repeat-y背景图像在纵向平铺
4、背景图片位置
利用 background-position 属性可以改变图片在背景中的位置
background-position: x y;参数代表的意思是x 坐标和 y 坐标。 可以使用 方位名词 或者 精确单位
参数说明length百分数 | 长度值positiontop | center | bottom | left |right 方位名词
参数是方位名词 如果指定的两个值都是方位名词则两个值前后顺序无关比如 left top 和 top left 效果一致如果只指定了一个方位名词另一个值省略则第二个值默认居中对齐 参数是精确单位 如果参数值是精确坐标那么第一个肯定是 x 坐标第二个一定是 y 坐标如果只指定一个数值那该数值一定是 x 坐标另一个默认垂直居中 参数是混合单位 如果指定的两个值是精确单位和方位名词混合使用则第一个值是 x 坐标第二个值是 y
5、背景图像固定背景附着
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动后期可以制作视差滚动的效果
background-attachment : scroll | fixed参数作用scroll背景图随着对象滚动fixed背景图像固定
6、背景复合写法
为了简化背景属性的代码我们可以将这些属性合并简写在同一个属性 background 中节约代码量。
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
background: transparent url(image.jpg) repeat-y fixed top;7、背景色半透明
CSS3 为我们提供了背景颜色半透明的效果。
background: rgba(0, 0, 0, 0.3);最后一个参数是 alpha 透明度取值范围在 0~1之间习惯把 0.3 的 0 省略掉写为 background: rgba(0, 0, 0, .3);背景半透明是指盒子背景半透明盒子的内容不受影响CSS3 新增属性 IE9 版本浏览器才支持的。但现在实际开发我们不太关注兼容性写法了可以放心使用
十、CSS三大特性
1、层叠性
相同选择器给设置相同的样式此时一个样式就会覆盖另一个冲突的样式。层叠性主要 解决样式冲突的问题
相同优先级后来居上
2、继承性
子标签会维承父标签的某些样式如文本颜色和字号。子承父业
text-,font-,line-,color属性
行高的继承
body {font: 12px/1.5 Microsoft YaHei;
}行高可以跟单位也可以不跟单位
如果子元素没有设置行高继承父元素的行高为 1.5此时子元素的行高是 当前子元素的文字大小 * 1.5
优势就是里面的子元素可以根据自己文字大小自动调整行高
3、优先级
选择器权重继承、*0,0,0,0元素选择器0,0,0,1类选择器、伪类选择器0,0,1,0ID选择器0,1,0,0行内元素1,0,0,0!important无穷大
权重是有4组数字组成但是不会有进位。等级判断从左向右如果某一位数值相同则判斯下一位数值继承的权重是0如果该元素没有直接选中 不管父元素权重多高子元素得到的权重都是0。
