CSS Cascade Style Sheets 样式表 层叠/级联
作用:美化HTML
语法:
样式属性名:值;样式属性名2:值2;
行内样式
场景:应用于网页中一个元素样式。
语法:<html标签 。。。 style="样式规则">....</html标签>
应用:自动应用
例子: <h1 style="font-size:20px;color:red;font-family:楷体"> 增加样式的标题</h1>
内嵌样式
<head>
<style type="text/css">
选择器名称{
样式规则
}
</style>
</head>
1.html选择器
场景:同一个网页中多个相同标签,样式一致。
语法:
<style type="text/css">
html标签名称{
样式规则
}
</style>
应用:自动应用
例子:<head>
<style type="text/css">
p{
border-style:solid;
border-width:2px;
border-top-color:red;
border-bottom-color:yellow;
border-left-color:green;
border-right-color:blue;
}
</style>
</head>
<p align="center">窗前明月光,疑是地上霜,举头望明月,低头思故乡</p>
2,class选择器(类选择器)
场景:同一个网页中多个不同的标签,样式一致。
语法: <style type="text/css">
.选择器名称{
样式规则
}
</style>
应用:<html标签 。。。。 class="选择器名称(不含.)" >.......</html标签>
例子:<style type="text/css">
.myBorder{
border:solid 2px red;
}
</style>
<h1 align="center" class="myBorder">标题1</h1>
<p class="myBorder"> 窗前明月光,疑是地上霜,举头望明月,低头思故乡窗前明月光,疑是地上霜,举头望明月,低头思故乡窗前明月光,疑是地上霜,举头望明月,低头思故乡窗前明月光,疑是地上霜,举头望明月,低头思故乡窗前明月光,疑是地上霜,举头望明月,低头思故乡窗前明月光,疑是地上霜,举头望明月,低头思故乡窗前明月光,疑是地上霜,举头望明月,低头思故乡窗前明月光,疑是地上霜,举头望明月,低头思故乡窗前明月光,疑是地上霜,举头望明月,低头思故乡窗前明月光,疑是地上霜,举头望明月,低头思故乡</p>
3,id选择器(了解)
场景:同一个网页中多个不同的标签,样式一致。
语法: <style type="text/css">
#选择器名称{
样式规则
}
</style>
应用:<html标签 。。。。 id="选择器名称(不含#)" >.......</html标签>
注意:在html中,id属性,通常用应用唯一标示网页中的一个页面元素
例子: <style type="text/css">
#myBorder{
border:solid 2px red;
}
</style>
<h1 align="center" id="myBorder">标题1</h1>
<p id="myBorder"> 窗前明月光,疑是地上霜,举头望明月,低头思故乡窗前明月光,疑是地上霜,举头望明月,低头思故乡窗前明月光,疑是地上霜,举头望明月,低头思故乡窗前明月光,疑是地上霜,举头望明月,低头思故乡窗前明月光,疑是地上霜,举头望明月,低头思故乡窗前明月光,疑是地上霜,举头望明月,低头思故乡窗前明月光,疑是地上霜,举头望明月,低头思故乡窗前明月光,疑是地上霜,举头望明月,低头思故乡窗前明月光,疑是地上霜,举头望明月,低头思故乡窗前明月光,疑是地上霜,举头望明月,低头思故乡</p>
4,伪类选择器
场景:在特定的标签上,产生特定动作时,样式特殊。
语法:
a:hover{ /*鼠标移上*/
样式规则
}
应用:自动应用
例子 <style type="text/css">
a{
color:yellow;
text-decoration:none;
}
a:hover{
color:red;
text-decoration:underline;
}
</style>
<a href="#">超链接,移动过来变成红色同时有下划线</a>
a:hover 鼠标移上
a:visited 访问过的超链接
a:active 正在点击
a:link 未访问过的超链接
外部样式
场景:同一站点内的多个网页,样式风格统一
语法:
1)定义外部样式表文件
后缀是.css
文件中不能包含html标签,只能有css相关的语法
2) 引入外部表文件
<head>
<link rel="stylesheet" type="text/css" href="css/mystyle.css" />
</head>
应用:同上面各种样式表
例子: 参考 one.html two.html style.css
常用的样式属性
1,文本字体相关
font-size:80px 字体大小
color:red 颜色名称
#FF0000 RGB色值
font-famliy:隶书 字体类型
text-decoration:none 无下划线
underline 有下划线
2,边框相关
border:样式,粗细,颜色 /*上下左右*/
border:solid 2px red;
border-style:solid;
border-top-style:
border-bottom-style:
border-left-style:
border-right-style:
border-width:
border-top-width:
border-bottom-width:
border-left-width:
border-right-width:
border-color
border-top-color
border-bottom-color
border-left-color
border-right-color
width:300px 宽
heigth:100px 高
3,背景相关
background-image:url(图片路径/文件名) 背景图片
background-repeat:no-repeat|repeat|repeat-x|repeat-y 背景重复
background-position:center 背景对齐,位置
background-color:red 背景颜色
4,鼠标相关
cursor:pointer|wait|move
布局
行级标签 <span>...</span> 不影响原内容显示,常用语对行中部分内容添加特殊样式
快级标签 <div>..</div> 单独占1块内容。
position:absolute /*决定定位*/
left:50px; x坐标
top:200px; y坐标
z-index:1 z坐标
width: 宽度
height 高度
display:none|block|inline 显示
DIV布局
float:left; 浮动方式,left从左往右从上下显示
盒子模型:网页中每个元素都被看成一个矩形框(盒子),由内容,padding(填充/内边距),border(边框)和margin(空白处/外边框)组成。
对应的相关样式属性:
padding:3px; 内边框
margin:4px 外边框
border: 边框
margin是div和周边元素的距离
padding是这个div里面内容和div的距离
CSS Cascade Style Sheets 样式表 层叠/级联
最新推荐文章于 2023-04-23 13:58:44 发布