CSS样式基础
CSS样式基础
css样式是可以使用/* */来进行注释的
/*标签选择器 */
p{
font-size:12px;/*属性名 ：属性值 */
color:blue; /* 最后一条声明可以没有分号。*/
}
一、css添加方法
①行内 -标签内部添加属性
<P style="color:red;">
我有一双隐形的翅膀
</p>
②内嵌样式
<style type="text/css">
p{
color:red;
}
</style>
③外部样式表文件style.css
<link rel="stylesheet" href="css/style.css"/>
注：若三种css添加方法同时出现的时候，优先级采用“就近原则” 先行内样式>内嵌样式>链接样式>浏览器默认样式。
二、css选择器
①标签选择器
<style type="text/css">
body{
}
p{
}
</style>
②类别选择器
<style type="text/css">
.one{}
</style>
<Body>
<p class="one">打开窗 </P>
<p class="one left blue">类别选择器属性值可以多个混用</p>
</Body>
③id选择器 id属性具有唯一性。
<style type="text/css">
#one{}
</style>
<Body>
<p id="one">打开窗 </P>
</Body>
④嵌套声明
<style type="text/css">
p /*空格*/ span{
}
</style>
<body>
<P> <span>看见</span> 星星</p>
</body>
⑤集体声明
<style type=" text/css">
h1,p{}
</style>
<body>
<h1>依然守在</h1>
<P>夜空中<p>
</body>
⑥全局声明 针对所有的样式进行声明
<style type="text/css">
*{
}
</style>
三、css样式的常见属性设置
①文本和字体样式设置
一次性定义字体 font: bold 18px '宋体'
字体大小 font-size:13px
字体类别 font-family:sans-serif
斜体 font-style:italic
粗体 font_weight:bold
文字大小单位： px:像素 em:自动适应用户所使用的字体。 %：百分比 （参照上层字体的大小）
文本颜色 color：#00ff00
字符间距 letter-spacing:-2px
行高line-height:2px //可用于文本垂直居中。通过设置行高=文本高度
对齐 text-align:center
装饰线 text-decoration:none无 overline上划线 underline下划线 line-through删除线
首行缩进 text-indent:2em
②背景和超链接样式设置
背景 backgroud :blue url("logo.png") repeat
背景颜色 backgroud-color:#ff0000;
背景图片 backgroud-image:url("logo.png");
背景的填充方式 backgroud-repeat：repeat repeat-x 横向填充 repeat-y 纵向填充 no-repeat 只显示一次
a:link 普通的、未被访问的链接
a:visited 被点击过的链接
a:hover 鼠标悬停在链接上的时候
a:active 鼠标点击链接的时刻
③列表和表格的样式
对于无序列表ul
设置标志形状 list-style-type :disc 实心圆 squal方块
设置标志为图片list-style-image:url(logo.png)
设置表格边框 table,td,th{ border:1px solid #eee border-collapse:collapse表格边框合并 }
奇偶选择器 ：nth-child(odd|even)
tr:nth-child(odd){
background-color:#0000ff;//选择奇数列的背景颜色为蓝色
}