中国网库做网站,wordpress列表页,中国建设银行巴黎分行网站,高港区住房和城乡建设局网站CSS3基础
1.CSS基本概念
CSS是Cascading Style Sheets#xff08;层叠样式表#xff09;的缩写#xff0c;它是一种对Web文档添加样式的简单机制#xff0c;是一种表现HTML或XML等文件外观样式的计算机语言#xff0c;是一种网页排版和布局设计的技术。
CSS的特点
纯C…CSS3基础
1.CSS基本概念
CSS是Cascading Style Sheets层叠样式表的缩写它是一种对Web文档添加样式的简单机制是一种表现HTML或XML等文件外观样式的计算机语言是一种网页排版和布局设计的技术。
CSS的特点
纯CSS布局与结构式HTML相结合能帮助设计师分离外观与结构和传统的表格布局相比具有以下特点
网页载入更快降低流量费用修改设计时效率高更容易被搜索引擎收录
浏览器前缀
-ms-IE浏览器前缀-moz- 火狐 浏览器前缀-webkit-:苹果、微软和谷歌浏览器前缀-o-欧朋浏览器前缀
2.CSS的语法基础
构造CSS的样式规则
css由两部分构成包括选择符和属性
选择符 {属性1:属性值1;属性2:属性值2;属性3:属性值3;
}如果属性的值是由多个单词组成并且单词间有空格那么 必须给值加上引号
p{font-family:Times New Roman
}如果对一个选择符指定多个属性时用分号进行分开
p{text-align:center;color:red;font-family:宋体;
}不同的选择符有相同的属性可以用逗号进行分割
p,h1{font-size:10px
}注释为
/* */3.CSS引入方式
三种引入方式
具体有3种引入方式语法如下表格所示
名称语法描述示例行内样式在标签内使用style属性属性值是css属性键值对h1 style“xxx:xxx;”中国新闻网/h1内嵌样式定义style标签在标签内部定义css样式style type“text/css” h1 {…} /style外联样式定义link标签通过href属性引入外部css文件link rel“stylesheet” href“css/news.css”外导式import url(“外部样式表相对路径”)语句将外部样式表文件链接到HTML文档中import url(“style.css”);
对于上述3种引入方式企业开发的使用情况如下
内联样式会出现大量的代码冗余不方便后期的维护所以不常用。内部样式通过定义css选择器让样式作用于当前页面的指定的标签上。外部样式html和css实现了完全的分离企业开发常用方式。
外联样式与外导式的区别
--隶属关系不同:link标签属于HTML标签而import是CsS提供的载入方式。
--加载时间及顺序不同:使用link链接的CSS样式文件时浏览器先将外部的CSS文件加载到网页当中然后再进行编译显示;而import导入CSS文件时浏览器先将HTML结构呈现出来再把外部的CSS文件加载到网页中当网速较慢时会先显示没有CSS时的效果加载完毕后再渲染页面。
--兼容性不同:由于import是css 2.1提出的只有在IE5W上的版本才能识别而link标签无此问题。DOM模型控制样式:使用JavaScript控制DOM改变样式时只能使用link标签而import不受DOM模型控制。具体展现
行内样式展现
span stylecolor:red;font-weight:bold;内联样式/span在HTML标签中,使用style属性来添加CSS样式其取值由属性和值组成两者以冒号“:”分隔多个属性之间用分号“”分隔。
内嵌模式 style typetext/cssdiv{colorred;}/style常用于HTML的头部标签中
链接外部样式
link hrefCSS文件的路径 typetext/css relstylesheet/href取值为外部样式文件的路径type设置外部文档的类型。取值为text/css时表示外部文档的类型为CSS样式表取值为text/javascript时表示外部文档的类型为javascript脚本rel设置当前文档与引用外部文档的关系。取值为stylesheet表示定义一个外部样式表。
4.CSS选择器
CSS的性质
选择器名 {css样式名css样式值;css样式名css样式值;
}CSS样式的特殊性
当基础选择器的多个规则都应用在同一元素时权重高的样式优先。 样式优先级从高到低分别是 id选择器、类选择器、标签选择器、通用选择器。
若设置样式 样式优先级从高到低分别是 内联-内嵌-外联-外导 CSS样式的继承性
特定的CSS属性向下传递到其子元素的特性 CSS样式的层叠性
当同一个元素设置有多个样 式且有相同特殊性CSS规范将根据样式的先后顺序 后定义的先应用。 CSS样式的重要性
当标签选择器的属性值后加 上”!important” 之后该属性 设置的优先权将高于一切其 他样式规则
基础选择器 通用选择器
通用选择器“ * ”号表示它是所有选择器中作用范围最广的能匹配页面中所有的元素。
*{margin:0px;padding:0px;border:0px}标签选择器
指用HTML标签名称作为选择器按标签名称分类为页面中某一类标签指定统一的CSS样式 。
标签名{font-famliy:黑体;font-size:12px;color:green;}类选择器
用来为一系列的网页元素定义相同的显示样式。类选择器使用“.”进行标识后面紧跟类名。在HTML中和XHTML中类名是区分大小写的
.类名{color:green;
}id选择器
用来为唯一的网页元素定义显示样式。ID选择器使用“#”进行标识后面紧跟ID名。在HTML中和XHTML中id名是区分大小写的
#id名{color:green;
}组合选择器
选择器示例示例描述后代选择器div p选择 元素内的所有 元素。 子元素选择器div p选择其父元素是 元素的所有 元素即 前面的标签只可能为 此时p在div标签之内。 相邻兄弟选择器div p选择所有紧随 元素之后第一个 元素此时 标签在 标签之外。 p ~ ul选择前面有 元素的每个 元素。 选择所有紧随 元素之后所有的 元素此时 标签在 标签之外。 群选择器h1,h2,h3{color:green;}标签名,标签名{属性1:属性值1; 属性2:属性值2;}
属性选择器 所有 CSS 属性选择器
格式
元素[属性]{属性1属性值;
}选择器例子例子描述选择器作用域[attribute][target]选择带有 target 属性的所有元素。作用于含有属性为target[attributevalue][target_blank]选择带有 target“_blank” 属性的所有元素。作用于含有属性为target且属性的值为value的元素[attribute~value][title~flower]选择带有包含 “flower” 一词的 title 属性的所有元素。上面的例子会匹配以下属性的元素title“flower”、title“summer flower” 以及 title“flower new”但不匹配title“my-flower” 或 title“flowers”。[attribute|value][lang|en]选择带有以 “en” 开头的 lang 属性的所有元素。值必须是完整或单独的单词[attribute^value]a[href^“https”]选择其 href 属性值以 “https” 开头的每个 元素。值不必是完整单词[attribute$value]a[href$“.pdf”]选择其 href 属性值以 “.pdf” 结尾的每个 元素。值不必是完整单词[attribute*value]a[href*“w3school”]选择其 href 属性值包含子串 “w3school” 的每个 元素。值不必是完整单词
伪类选择器
伪类是可以向某些选择器添加特殊效果的、一组CSS预定 义好的类不需要进行id和class属性的声明就能自动 地被支持CSS的浏览器所识别。常常与超链接标签联用
伪类选择器标签 5.CSS中的一些属性
1.文本属性
字体样式类
-color设置文本的颜色-font-family设置文本的字体-font-style设置字体样式(normal正常italic斜体oblique倾斜)-font-size设置文本的字号大小(设置文本的大小值可以是绝对或相对值其中绝对值从小到大依次xx-small、x-small、small、medium默认、large、x-large、xx-large单位可以是pt或em也可以采用百分比%的形式)-font-variant设定小型大写字母(normal正常、small-caps小型大写字母)-font-weight:设置字体粗细(bolder特粗体、bold粗体、normal正常、lighter细体或100~900之间的9个等级)-font:属性的简写可用于一次设置元素字体的两个或更多方面书写顺序font-style、font-variant、font-weight、font-size/line-height,font-family文本格式属性
-text-align文本水平对齐方式left、right、center、justify
-vertical-align文本垂直对齐方式bottom、top、middle、baseline-line-height设置文本的行间距三种单位像素px相对值em和百分比%
-letter-spacing定义字符的间距默认为normal
-text-indent属性用于设置首行文本的缩进。属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%允许使用负值, 建议使用em作为设置单位。-text-transform属性用于控制英文字符的大小写。可用属性值如下none不转换默认值。capitalize首字母大写。uppercase全部字符转换为大写。lowercase全部字符转换为小写。-text-decoration属性用于设置文本的下划线上划线删除线等修饰效果。
可用属性值如下none没有装饰正常文本默认值。underline下划线。overline上划线。line-through删除线。
设置修饰线的样式取值solid实线、double(双线、dotted点状线条、dashed虚线、wavy(波浪线-text-shadow属性可以为页面中的文本添加阴影效果。
常用子属性为
h-shadow用于设置水平阴影的距离
v-shadow用于设置垂直阴影的距离
blur用于设置模糊半径
color用于设置阴影颜色。
综合设置text-shadow属性取值的语法格式为 text-shadow:h-shadow v-shadow blur color文本对齐属性
text-align属性是将块级标签以及单元格里面的文本内容进行相应的对齐。属性取值可以是left、right、center、justify。
vertical-align属性是将行内元素一级单元格里面的文本内容进行相应的对齐。属性取值可以是bottom、top、middle、baseline。
如果希望将块级元素内的文本设置为垂直居中这里介绍一个巧妙的方法就是将文本行高line-height与块级元素的height值设置一样。文本加粗的属性
font-weight设置字体的粗细取值可以是bolder特粗体、bold粗体、normal正常、lighter细体或100~900之间的9个等级。颜色表示
在前端程序开发中颜色的表示方式常见的有如下三种
表示方式表示含义取值关键字预定义的颜色名red、green、blue…rgb表示法红绿蓝三原色每项取值范围0-255rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)十六进制表示法#开头将数字转换成十六进制表示#000000、#ff0000、#cccccc简写#000、#ccc
2.背景样式属性
background-color设置元素的背景颜色background-image:url(背景图像的路径)设置元素的背景图像取值格式为url(背景图像的路径)background-size设置元素的背景图像大小。取值为cover时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小取值为contain时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小取值为长度值第一个参数设置宽度第二个参数设置高度两个参数之间空格分隔。background-repeat设置元素的背景平铺方式。取值为no-repeat表示不平铺取值为repeat-x表示横向平铺取值为repeat-y表示纵向平铺取值为repeat表示双向平铺。background-position设置图像在背景中的位置取值top、bottom、left、
right、center或具体值、百分比background-attachmen设置背景图像是否随页面内容一起滚动取值scroll滚动、fixed固定3.页面布局
盒子模型 盒子页面中所有的元素标签都可以看做是一个 盒子由盒子将页面中的元素包含在一个矩形区域内通过盒子的视角更方便的进行页面布局 盒子模型组成内容区域content、内边距区域padding、边框区域border、外边距区域margin 布局标签 布局标签实际开发网页中会大量频繁的使用 div 和 span 这两个没有语义的布局标签。 标签 特点 div标签 一行只显示一个独占一行 宽度默认是父元素的宽度高度默认由内容撑开 可以设置宽高width、height span标签 一行可以显示多个 宽度和高度默认由内容撑开 不可以设置宽高width、height 内容区布局
内容区content是盒子模型的中心包含了盒子的 主要信息内容
内容区拥有width、 height和overflow三个属性其中overflow属性用于当 content中的信息太多并超出内容区所占的范围时通过 该属性来指定溢出内容的处理方式属性取值如下 4.边框属性
边框border是指围绕元素的内容和内边距的一条或 多条线拥有border-width 、border-style、 border-color 、 border-radius、 border-image 、box-shadow等属性
边框Border的属性可以分别对top顶部、right 右边、bottom 底部、left左边 进行设置例如
{border-top-width10px}。
{border-width10px 20px 30px 40px;}。
➢当边框宽度有3个参数时将按“上→左右→下”的顺序作用到边框上
➢当边框宽度有2个参数时将按“上下→左右”的顺序作用到边框上
➢当边框宽度有1个参数时四个方向的边框宽度取值相同border-style属性
border-style属性取值可以为none无边框、dotted点状线、dashed虚线、solid实线、double双线、groove3D凹陷型、ridge3D凸起型、 inset 3D凹边、 outset 3D凸边border-radius属性
border-radius属性可以设置左上角、右上角、右下角、左下角的圆角样式。
需要设置圆角的水平半径HR和垂直半径VR的大小。
➢ 水平半径与垂直半径相等时设置一个参数即可如
{border-top-left-radius:8px;}
➢ 水平半径与垂直半径不相等时需先设置水平半径再设垂直半径如
{border-top-left-radius:8px 20px;}border-image属性
border-image属性用于对元素的图像边框进行统一设置取值情况相对较复杂。可分别设置border-image-source图像的路径、border-image-slice图像分割方式设置图像边框向内偏移、border-image-width图像边框宽度、 border-image-repeat设置图像平铺方式。也可以统一设置格式如下border-image : url(图像的路径)
图像分割方式/图像边框宽度
图像平铺方式5.网页元素的定位属性
网页元素的定位分为普通流浮动和绝对定位 元素的浮动
元素的浮动是指设置了浮动属性的元素会脱离标准文档流 的控制移动到其父元素中指定位置的过程。浮动的盒子可以左 右移动直到它的边缘碰到包含框或另一个浮动盒子框的边缘。
选择器 {float:属性值}
属性值leftrightnone由于浮动元素不再占用原文档流中的位置所以会对页面 中其他元素的排版产生影响如果要避免这种影响就需要对元 素清除浮动。
选择器 {clear:属性值}
属性值
left 不允许左侧有浮动元素清除左侧浮动的影响
right 不允许右侧有浮动元素清除右侧浮动的影响
both 同时清除左右两侧浮动的影响元素的定位
定位模式
选择器 {position:属性值;}属性值
relative:相对位置
absolute绝对位置
fixed固定位置边偏移
选择器{边偏移属性:属性值}
属性值
topbottomleftright
