知识点:
一 div span ul ol li标记
二 css 概述
三 css 的调用方式
四 css的选择器
五 css当中的具体的样式
一 div span ul ol li标记
常用的 web2.0思想当中的标记。
1. div
注意:div 独占一行的。
2.span
3.ul ol li 一组
ul 无序列表
<ul type="square正方形 circle圆圈 disc 实心点">
<li>今天天气不错</li>
<li>明天也不错</li>
<li>后天仍然不错</li>
<li>aaaaa</li>
</ul>
<ol> 有序列表
<ol type="1 a i">
<li>今天天气不错</li>
<li>明天也不错</li>
<li>后天仍然不错</li>
<li>aaaaa</li>
</ol>
二 css 概述
1>什么是css
css 层叠样式表 ,替代属性,不用写在标记中
实现 表现与结构分离 ,便于管理。是页面代码整洁。
2> web2.0
table 架构页面
web2.0 div+css 架构页面 ****
html5 css3 web2.0思想的基础上 添加了一些内容
三 css 的调用方式
1》 css的格式:
{样式名称:样式值;样式名称:样式值;样式名称:样式值;样式名称:样式值;................................}
2》html 页面中如何调用css 表现和结构分离
A 标记上直接使用style属性来调用样式
<标记 style="样式名称:样式值;样式名称:样式值;样式名称:样式值;样式名称:样式值;......">
B html页面中内嵌样式
</head>
<style type="text/css">
样式列表
</style>
<body>
C 外部调用样式: *********
index.html--->index.css 样式文件
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
四 css的选择器 :在页面中找到元素的。
1 使用选择器的格式:
选择器{样式名称:样式值;样式名称:样式值;样式名称:样式值;样式名称:样式值;........}
2 css中的6中选择器
1》 通配选择器 选择页面上的所有元素
*{ }
2》 标记选择器
标记名称{ }
3> class 选择器 选中具有相同class 属性的元素
.className{ }
4> id选择器
#id{ }
5> 群组选择器:
#id,.className,标记名称.....{ }
6>派生选择器:
父选择器 子选择器
五 css当中的具体的样式
1> border width height
border: 粗细 solid实线 颜色。 元素边框的。
width : 像素值
height : 像素值
2>布局属性 元素的边距属性
padding: 上 右 下 左 ; 内边距: 注意:padding 会改变元素的 宽度和高度。
padding-top: 像素
padding-right:像素
padding-bottom:像素
padding-left:像素
注意:
padding:val; 一个值 表示 上 右 下 左 都是50 以上左为准
margin: 上 右 下 左 外边距 注意:margin 不会改变 外边元素的大小的。
margin-top: 像素
margin-right:像素
margin-bottom:像素
margin-left:像素
margin:50px; 一个值 表示 上 右 下 左 都是50 以上左为准
margin:auto; 水平居中*****
float: left right 浮动元素。独占一行的特性消除掉。
clear: both; 消除前后元素浮动所带来的影响的。
display: none | block; 控制 显示 隐藏元素的。
3>背景属性:
background-color:背景色
background-image:url(../imgs/2.jpg); 背景图:
如果背景图的宽 高 < 元素的宽 高 背景图 横向和纵向平铺。
background-repeat: no-repeat repeat-x repeat-y 是否平铺,平铺方式
background-position: x(正右 负左) y(正下 负上) ;调整背景图位置
background: color image repeat 附着方式 position; 总的样式
4》字体属性
font-size: 像素值 ;设置字体大小的
color: 颜色
font-style: normal | italic 斜体 文本样式
font-weight: 100---900 bold 加粗
font-family:"隶书"; 文本书法体
text-align: left center right 水平位置
line-height: 行高
font: style weight size line-height family:总的样式
5》 边框属性:
border:1px solid #ff0000;
border-top: 粗细 线体 颜色
border-right: 粗细 线体 颜色
border-bottom: 粗细 线体 颜色
border-left: 粗细 线体 颜色
6》 列表
list-style:none;去除列表前面的标示
list-style-image:url(../imgs/flag1.jpg); 列表中的 标示 可以是图片。
7》其他常用样式:
text-decoration: 文本的修饰线 line-through underline;
鼠标的四种状态: 超链接样式一般使用的是伪类 就是 :样式名称
刷新状态 :link {} --> 不支持 a #id .className { 样式}
鼠标移动上去 :hover{}
鼠标单击 :active{}
点击过后的状态 :visited{}
一 补充样式
鼠标样式 cursor: pointer wait text ; 鼠标移动上去的形状
以下两个样式都是控制元素透明度的。
filter:alpha(opacity=value); 元素的透明度 value 0---100 针对浏览器ie6,7,8
opacity:value value(0--1); 针对浏览器ff google ie9+
position: relative相对 absolute绝对; 给元素定位的
left:
top:
1> position : relative 相对 与默认位置移动了。(left top)
2》position:absolute
默认情况下 position:absolute; 元素是相对于 body 定位的。
如果 父元素 有 position: relative/absolute ,子元素的定位 都是相对于 父元素来的。
注意:position 是用来定义哪些 跨界 的元素。
css学习使用速查
猜你喜欢
转载自blog.csdn.net/qq_28635317/article/details/106162228
今日推荐
周排行