HTML_04_css_的引入方式_基本选择器
css要样式 cascading style sheet 层叠样式
css的目的
给html 加上各种各样样式 便于维护与更新
css语法
选择器{属性:属性值;属性名:属性值;}
说明
属性 不要双引号
单位 要px
引入css样式
1,行内样式表
<标签 style =“属性名:属性值”>内容</标签>
只能给当前的对应的标签
2,内嵌式
<style type="text/css">
选择器{属性名:属性值;}
</style>
3.外部样式表
<link rel="stylesheet" type="text/css" href="xxx.css
">
可以引入多个样式表
4,导入样式表:
管理css
格式: @import url(xx.css)另一个css样式
必须放到css样式的最上端
选择器的分类
标签选择器
格式:标签{ 属性名:属性值;}
会把样式套用到所有的对应的标签
类选择器
给一类html标签加样式
用 . 表示
.myclass{
属性名:属性值;
font-weight:bold;//文本加错;
}
<标签 class="myclass"></标签>
id选择器
是给特定的选择器
只能引用一次主要给javascript用的
#myid{
属性名:属性值;
font-size:12px;//字体大小
line-height:24px;//行高129%;百分比;
text-indent:2em;//首行缩进两个汉字
font-weight:bold;//文本加错;normal;
}
<标签 class="myid"></标签>
通用选择器
(*所有)给所有的标签加样式
并不是所有的浏览器都支持 ie6
语法:
*{
属性名:属性值;
}
复合选择器
多元素选择器
语法:
选择器,选择器,{ 属性名:属性值;
text-decoration:underline;//下划线
}
后代元素选择器
语法:
选择器1 选择器2 选择器3{
}
子元素选择器
格式:
选择器>选择器{
}
ul>li{
}
伪类:<a>
a:link{//默认
color:black;
text-decoration:none;
}
a:visited{//访问后
color:red;
text-decoration:none;
}
a:hover{//鼠标经过
color:red;
text-decoration:none;
}
a:active{//鼠标点击瞬间
color:red;
text-decoration:none;
font-size:18px;
}
文本属性
font-size
font-weight:bold//normal
font-style:italic斜了//normal
font-family:楷书;
text-decoration:underline;overline;line-through;none;
text-indent:2em;缩进汉字
color
letter-spacing:字母之间的距离;px
word-spacing:单词与单词之间的距离;
text-align:left center right;
🐳 作者:hiszm 📢 版权:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,万分感谢。 💬 留言:同时 , 如果文中有什么错误,欢迎指出。以免更多的人被误导。 |
![]() |