CSS作用:是为了使网页美观,升级方便,维护轻松,能够让网页内容和样式信息进行分离。
(让内容和样式分开)。
使用link来导入CSS文件。
语法:<link href="url" type="text/css" rel="stylesheet" />
每个HTML都带了一个属性Style,可以直接设置CSS样式。
语法:<body style="background-color:red"></body>
选择器:
Html选择器:以原始本身命名的选择器。
语法:<style type="text/css">
Table{
Border:2px;
}
</style>
<table></table>//table会自动调用style里面的属性。
优点:直观,能一眼看出是选择的谁。
缺点:对于重复的html元素,不能单独设置属性。
Class选择器:
语法:<style type="text/css">
.tb1{
Border:2px;
}
</style>
<table class="tb1"></table>//用class的名字来设置属性
<元素 class="属性1 属性2 属性···">
Id选择器:
语法:<style type="text/css">
#b1{
Border:2px;
}
</style>
<table id="b1"></table>//用id名来标识来设置属性
id只能指定一个选择器且唯一
父子关系:
1.<style type="text/css">
Body div{
}
</style>
<body>
<div></div>
</body>
2.<style type="text/css">
#div1 div {
}
</style>
<body>
<div id="div1">
<div></div>
</div>
</body>
3.<style type="text/css">
#div1 #div2{
}
</style>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
Class同id一样。
伪类:又浏览器自动识别
如 a:link 未访问的连接
a:hover 鼠标指上去的时候
a:visited 已访问的连接
a:active 激活连接
优先级:内联->内嵌->外联
内联:直接当作属性写在元素后面。
内嵌:以集合方式写是head标签里面
外联:用<link>导入后缀名为.CSS的文件
导入:在<style>标签中使用@import url(文件路径);
常用的文本属性:
Font-size:文本的字体大小
Font-family:文本的字体类型
Font-syle:文本的字体样式
color:文本的字体颜色
Text-align:文本的字体对齐方式
常用的背景属性
Background-color:背景颜色
Background-image:背景图片
Background-repeat:
可取值:repeat 铺满 no-repeat 不铺满 repeat-x x轴平铺 repeat-y y轴平铺
常用的边界属性
Margin-top:对象的上边界
Margin-left:对象的左边界
Margin-bottom:对象的下边界
Margin-right:对象的又边界
Margin:0px auto;//代表居中
边框属性
Border-style:边框的样式
Border-width:边框的宽度
Border-color:边框的颜色
填充属性
Padding-top:内容与上边框之间距离
Padding-right:内容与右边框之间距离
Padding-left:内容与左边框之间距离
Padding-bottom:内容与下边框之间距离
盒子模型:
盒子中的内容:content;
内容与边框之间的填充:padding
边框:border
边界:margin
元素的排列方式是以标准流的方式
盒子宽度:padding-left + border-left + margin-left + width + padding-right + border-right + margin-right
盒子高度:padding-top + border-top + margin-top + height + padding-bottom + border-bottom + margin-bottom
浮动:可以改变流的位置,float属性的left和right分别能够让元素对象向左或者向右浮动。
左浮动:把位置让开,让后面的上来。
右浮动:把位置让开,后面的位置顶替前面的位置。
清空浮动:让元素停止浮动。
文挡流:在body中按照元素的先后顺序,从上而下,自左而右进行排列(标准流)
非标准流,给某个元素定位后的流叫做非标准留。
定位:
绝对定位:当容器的position属性值为absolute时,这个容器被相对定位了。使用绝对定位的容器前面或后面的容器会认为这个层不存在,绝对定位是对于利自己最近的非标准流盒子。
相对定位:当容器的position属性值为relative时,这个容器即被相对定位了。
无序或者有序做CSS做导航
<style type="text/css">
ul{
List-style-type:none;
}
Li{
Float:left;
Margin-left:10px;
}
</style>
(让内容和样式分开)。
使用link来导入CSS文件。
语法:<link href="url" type="text/css" rel="stylesheet" />
每个HTML都带了一个属性Style,可以直接设置CSS样式。
语法:<body style="background-color:red"></body>
选择器:
Html选择器:以原始本身命名的选择器。
语法:<style type="text/css">
Table{
Border:2px;
}
</style>
<table></table>//table会自动调用style里面的属性。
优点:直观,能一眼看出是选择的谁。
缺点:对于重复的html元素,不能单独设置属性。
Class选择器:
语法:<style type="text/css">
.tb1{
Border:2px;
}
</style>
<table class="tb1"></table>//用class的名字来设置属性
<元素 class="属性1 属性2 属性···">
Id选择器:
语法:<style type="text/css">
#b1{
Border:2px;
}
</style>
<table id="b1"></table>//用id名来标识来设置属性
id只能指定一个选择器且唯一
父子关系:
1.<style type="text/css">
Body div{
}
</style>
<body>
<div></div>
</body>
2.<style type="text/css">
#div1 div {
}
</style>
<body>
<div id="div1">
<div></div>
</div>
</body>
3.<style type="text/css">
#div1 #div2{
}
</style>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
Class同id一样。
伪类:又浏览器自动识别
如 a:link 未访问的连接
a:hover 鼠标指上去的时候
a:visited 已访问的连接
a:active 激活连接
优先级:内联->内嵌->外联
内联:直接当作属性写在元素后面。
内嵌:以集合方式写是head标签里面
外联:用<link>导入后缀名为.CSS的文件
导入:在<style>标签中使用@import url(文件路径);
常用的文本属性:
Font-size:文本的字体大小
Font-family:文本的字体类型
Font-syle:文本的字体样式
color:文本的字体颜色
Text-align:文本的字体对齐方式
常用的背景属性
Background-color:背景颜色
Background-image:背景图片
Background-repeat:
可取值:repeat 铺满 no-repeat 不铺满 repeat-x x轴平铺 repeat-y y轴平铺
常用的边界属性
Margin-top:对象的上边界
Margin-left:对象的左边界
Margin-bottom:对象的下边界
Margin-right:对象的又边界
Margin:0px auto;//代表居中
边框属性
Border-style:边框的样式
Border-width:边框的宽度
Border-color:边框的颜色
填充属性
Padding-top:内容与上边框之间距离
Padding-right:内容与右边框之间距离
Padding-left:内容与左边框之间距离
Padding-bottom:内容与下边框之间距离
盒子模型:
盒子中的内容:content;
内容与边框之间的填充:padding
边框:border
边界:margin
元素的排列方式是以标准流的方式
盒子宽度:padding-left + border-left + margin-left + width + padding-right + border-right + margin-right
盒子高度:padding-top + border-top + margin-top + height + padding-bottom + border-bottom + margin-bottom
浮动:可以改变流的位置,float属性的left和right分别能够让元素对象向左或者向右浮动。
左浮动:把位置让开,让后面的上来。
右浮动:把位置让开,后面的位置顶替前面的位置。
清空浮动:让元素停止浮动。
文挡流:在body中按照元素的先后顺序,从上而下,自左而右进行排列(标准流)
非标准流,给某个元素定位后的流叫做非标准留。
定位:
绝对定位:当容器的position属性值为absolute时,这个容器被相对定位了。使用绝对定位的容器前面或后面的容器会认为这个层不存在,绝对定位是对于利自己最近的非标准流盒子。
相对定位:当容器的position属性值为relative时,这个容器即被相对定位了。
无序或者有序做CSS做导航
<style type="text/css">
ul{
List-style-type:none;
}
Li{
Float:left;
Margin-left:10px;
}
</style>