CSS
1,什么是css
css 指层叠样式表 (Cascading Style Sheets)
css 样式定义如何显示 HTML 元素内容
css 主要为了解决内容与表现分离的问题
即:html标签只负责展现内容,但是内容具体表现的每一个小细节都又css样式来控制
例如:html中的table标签只是负责告诉浏览器下面的内容是要放在一个表格中显示的,但是具体显示的细节是css来告诉浏览器的(表格的边框大小颜色、数据在td中的位置颜色大小等等细节)
html : 页面结构 <div>
css : 页面效果
2.css文件的创建
创建以.css为后缀名的文件
在文件中直接按照css语法来设置样式
3.CSS样式的分类
1.浏览器缺省设置(不用设置,浏览器有默认的显示方式)
2.外部样式 (css样式写在外部的一个.css结尾的文件中)
3.内联样式 (位于 <head> style标签内部)
4.行内样式 (在 HTML 元素内部的style属性中定义式)
4.如何作用与html
1.行内样式
style属性
2.内联样式
style标签
3.外部引入样式
link标签 href属性
优先级：行内样式>内联/外部引入
5.语法 : 选择器+属性+值
空白：是代码更具有可读性
注释：/**/ √
属性名和属性值之间使用 : 隔开，多对属性之间使用分号隔开
将样式属性使用{}包裹，{}之前使用选择器选择元素
最后一个属性值后面可以不加分号
选择器{
属性名:属性值;
属性名:属性值;
属性名:属性值;
}
6.选择器
6.1.元素选择器
标签名
6.2.类选择器 选择某一类元素 添加class属性
.class
6.3.id选择器
#id
6.4.所有选择器
*
6.5.后代选择器
空格 后代选择器
> 子代选择器
+ 下一个兄弟选择器
~ 下面一般兄弟选择器
6.6.多选择器
#id,.class,标签...
6.7.组合选择器
div#one
6.8.属性选择器
[attr] 选择含有id属性的标签
[attr="one"] 选择含有id属性并且id值为o的标签
[attr*="o"] 选择含有id属性并且id值包含o的标签
[attr^="o"] 选择含有id属性并且id值以o开头的标签
[attr$="o"] 选择含有id属性并且id值以o结尾的标签
[attr~="one"] 选择具有attr属性的,并且attr的值之一为one的元素
6.9.伪类选择器
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 但鼠标点中 */
input:focus{color: #0000FF} /* input获得焦点 */
p:first-letter{color: #0000FF} /* 选择p标签的首字符 */
p:first-line{color: #0000FF} /* 选择p标签的首行 */
div :first-child{color: #0000FF} /* 获取div的第一个孩子 */
div :first-of-type{color: #0000FF} /* 获取div的每个类型标签第一个孩子 */
div :nth-child(n){color: #0000FF} /* 获取div的第n个孩子 */
div :not(selector){color: #0000FF} /* 获取div的后代中不包括selector选择的孩子 */
7.文本样式
color：字体颜色
十六进制数:#FFFFFF
关键字:red;
rgb(16,12,11)
rgba(16,12,11,0.5);透明度
font-size：50px; 字体大小
font-family:楷体 设置字体
font-style: 字体样式
italic [印刷]斜体
normal 正常
oblique 斜体
font-weight : 900 字体的粗细
text-transform： 字体转换
capitalize 首字母大写
uppercase 转大写
lowercase 转小写
* text-align: 文本对齐样式
center left right
line-height: 设置行高
text-decoration: 文本效果
none 没有效果 去除a标签的下划线
underline 下划线
overline 上划线
line-through 删除线
text-indent: 5em; 段落缩进
letter-spacing: 10px; 字符间距
8,边框样式
border:设置边框的大小
dashed 虚线
solid 实线
dotted 小点
double 双实线
groove 上阴影
ridge 下阴影
outset 整体下阴影
* border-radius: 5px;设置边框的尖角有弧度
border-style : 设置边框的样式-->同上border
solid dotted
border-color:设置边框的颜色
border-collapse:collapse;设置table边框的重叠
eg:table{border-collapse:collapse;}
影子:
background-color:#DFD2ED;
box-shadow: 10px 10px 3px #DFE6ED;
9.背景
background-color:red;设置背景色
background-image:设置背景图片 (平铺)
background-image:url("");
background-repeat: 设置背景图片的重复效果
repeat 重复平铺
no-repeat 不重复
repeat-x x轴重复平铺
repeat-y y轴重复平铺
eg:
background-image:url("image/a.png");
background-repeat: repeat-x;
background-position: 设置背景图片的位置
top right bottom left
C3 XX background-size:100px 200px; 背景图片尺寸
100% 100% 满屏
10.列表的设置
list-style-type:设置列表项标记的类型
none 无标记
decimal 数字
upper-roman 罗马数字
list-style-image:url("image/b.jpg");将图片设置为列表前的标记
11:布局样式:
1 width px
2 margin: auto;
设置元素,水平居中,前提是给当前元素设置width属性
3 height px; 设置高度
4 vertical-align:
在文本中垂直排列图象
eg:html
<p>
12345 <img src="image/b.jpg">6789
</p>
css
img{vertical-align:text-top;}
12.display 决定元素的显示级别
none:元素隐藏显示 不占用 页面空间
block:以块级元素显示
inline:元素以行内元素显示
table-cell:元素会作为一个单元格显示
overflow: hidden; 隐藏滚动条
28.盒子模型
对于一个html元素来说,它的的三个css属性:
margin 外边距
margin-left
margin-right
margin-top
margin-bottom
padding 内边距 : 内容 和 边框
padding-left
padding-right
padding-top
padding-bottom
border 边框
border-left
border-right
border-top
border-bottom
使用具体例子对照盒子模型图来说明问题.
29.CSS定位: position : relative(相对) absolute(绝对)
1.文档流:每个元素所占用文档或者网页空间的线性集合
默认的HTML里面的元素就是从上到下，从左到右的排版布局
2.相对定位
它是以自己本身所在位置偏移的(相对对象本身偏移)
会占用原始的位置
position: relative
top:
left:
元素不脱离文档流
3.绝对定位
相对于其最接近的一个具有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，则依据body对象左上角作为参考进行定位
position:absolute;
top:
left:
元素会脱离文档流
注意:定位用的是top left等属性,margin-left,padding-left属性不是定位而是指的他的内外边距
4.浮动定位
元素向左浮动,一旦遇到已经浮动的元素,当前元素停止浮动,浮动元素会脱离文档流
float:left right
1,什么是css
css 指层叠样式表 (Cascading Style Sheets)
css 样式定义如何显示 HTML 元素内容
css 主要为了解决内容与表现分离的问题
即:html标签只负责展现内容,但是内容具体表现的每一个小细节都又css样式来控制
例如:html中的table标签只是负责告诉浏览器下面的内容是要放在一个表格中显示的,但是具体显示的细节是css来告诉浏览器的(表格的边框大小颜色、数据在td中的位置颜色大小等等细节)
html : 页面结构 <div>
css : 页面效果
2.css文件的创建
创建以.css为后缀名的文件
在文件中直接按照css语法来设置样式
3.CSS样式的分类
1.浏览器缺省设置(不用设置,浏览器有默认的显示方式)
2.外部样式 (css样式写在外部的一个.css结尾的文件中)
3.内联样式 (位于 <head> style标签内部)
4.行内样式 (在 HTML 元素内部的style属性中定义式)
4.如何作用与html
1.行内样式
style属性
2.内联样式
style标签
3.外部引入样式
link标签 href属性
优先级：行内样式>内联/外部引入
5.语法 : 选择器+属性+值
空白：是代码更具有可读性
注释：/**/ √
属性名和属性值之间使用 : 隔开，多对属性之间使用分号隔开
将样式属性使用{}包裹，{}之前使用选择器选择元素
最后一个属性值后面可以不加分号
选择器{
属性名:属性值;
属性名:属性值;
属性名:属性值;
}
6.选择器
6.1.元素选择器
标签名
6.2.类选择器 选择某一类元素 添加class属性
.class
6.3.id选择器
#id
6.4.所有选择器
*
6.5.后代选择器
空格 后代选择器
> 子代选择器
+ 下一个兄弟选择器
~ 下面一般兄弟选择器
6.6.多选择器
#id,.class,标签...
6.7.组合选择器
div#one
6.8.属性选择器
[attr] 选择含有id属性的标签
[attr="one"] 选择含有id属性并且id值为o的标签
[attr*="o"] 选择含有id属性并且id值包含o的标签
[attr^="o"] 选择含有id属性并且id值以o开头的标签
[attr$="o"] 选择含有id属性并且id值以o结尾的标签
[attr~="one"] 选择具有attr属性的,并且attr的值之一为one的元素
6.9.伪类选择器
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 但鼠标点中 */
input:focus{color: #0000FF} /* input获得焦点 */
p:first-letter{color: #0000FF} /* 选择p标签的首字符 */
p:first-line{color: #0000FF} /* 选择p标签的首行 */
div :first-child{color: #0000FF} /* 获取div的第一个孩子 */
div :first-of-type{color: #0000FF} /* 获取div的每个类型标签第一个孩子 */
div :nth-child(n){color: #0000FF} /* 获取div的第n个孩子 */
div :not(selector){color: #0000FF} /* 获取div的后代中不包括selector选择的孩子 */
7.文本样式
color：字体颜色
十六进制数:#FFFFFF
关键字:red;
rgb(16,12,11)
rgba(16,12,11,0.5);透明度
font-size：50px; 字体大小
font-family:楷体 设置字体
font-style: 字体样式
italic [印刷]斜体
normal 正常
oblique 斜体
font-weight : 900 字体的粗细
text-transform： 字体转换
capitalize 首字母大写
uppercase 转大写
lowercase 转小写
* text-align: 文本对齐样式
center left right
line-height: 设置行高
text-decoration: 文本效果
none 没有效果 去除a标签的下划线
underline 下划线
overline 上划线
line-through 删除线
text-indent: 5em; 段落缩进
letter-spacing: 10px; 字符间距
8,边框样式
border:设置边框的大小
dashed 虚线
solid 实线
dotted 小点
double 双实线
groove 上阴影
ridge 下阴影
outset 整体下阴影
* border-radius: 5px;设置边框的尖角有弧度
border-style : 设置边框的样式-->同上border
solid dotted
border-color:设置边框的颜色
border-collapse:collapse;设置table边框的重叠
eg:table{border-collapse:collapse;}
影子:
background-color:#DFD2ED;
box-shadow: 10px 10px 3px #DFE6ED;
9.背景
background-color:red;设置背景色
background-image:设置背景图片 (平铺)
background-image:url("");
background-repeat: 设置背景图片的重复效果
repeat 重复平铺
no-repeat 不重复
repeat-x x轴重复平铺
repeat-y y轴重复平铺
eg:
background-image:url("image/a.png");
background-repeat: repeat-x;
background-position: 设置背景图片的位置
top right bottom left
C3 XX background-size:100px 200px; 背景图片尺寸
100% 100% 满屏
10.列表的设置
list-style-type:设置列表项标记的类型
none 无标记
decimal 数字
upper-roman 罗马数字
list-style-image:url("image/b.jpg");将图片设置为列表前的标记
11:布局样式:
1 width px
2 margin: auto;
设置元素,水平居中,前提是给当前元素设置width属性
3 height px; 设置高度
4 vertical-align:
在文本中垂直排列图象
eg:html
<p>
12345 <img src="image/b.jpg">6789
</p>
css
img{vertical-align:text-top;}
12.display 决定元素的显示级别
none:元素隐藏显示 不占用 页面空间
block:以块级元素显示
inline:元素以行内元素显示
table-cell:元素会作为一个单元格显示
overflow: hidden; 隐藏滚动条
28.盒子模型
对于一个html元素来说,它的的三个css属性:
margin 外边距
margin-left
margin-right
margin-top
margin-bottom
padding 内边距 : 内容 和 边框
padding-left
padding-right
padding-top
padding-bottom
border 边框
border-left
border-right
border-top
border-bottom
使用具体例子对照盒子模型图来说明问题.
29.CSS定位: position : relative(相对) absolute(绝对)
1.文档流:每个元素所占用文档或者网页空间的线性集合
默认的HTML里面的元素就是从上到下，从左到右的排版布局
2.相对定位
它是以自己本身所在位置偏移的(相对对象本身偏移)
会占用原始的位置
position: relative
top:
left:
元素不脱离文档流
3.绝对定位
相对于其最接近的一个具有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，则依据body对象左上角作为参考进行定位
position:absolute;
top:
left:
元素会脱离文档流
注意:定位用的是top left等属性,margin-left,padding-left属性不是定位而是指的他的内外边距
4.浮动定位
元素向左浮动,一旦遇到已经浮动的元素,当前元素停止浮动,浮动元素会脱离文档流
float:left right
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
