HTML_04_css_的引入方式_基本选择器
【摘要】
css要样式 cascading style sheet 层叠样式
css的目的
给html 加上各种各样样式 便于维护与更新
css语法
选择器{属性：属性值；属性名：属性值；}
说明
属性 不要双引号
单位 要px
...
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.blog.csdn.net，作者：孙中明，版权归原作者所有，如需转载，请联系作者。
原文链接：hiszm.blog.csdn.net/article/details/52895780
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）