正文
Html标签第二课css
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
css（Cascading Style Sheet）叠层样式表。用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
一：样式三种控制方法
1、行内样式：
<div style="height:100p; width:100px border:solid; red;"></div>
2、内嵌式
(1)标签选择器 优先级：标签选择器<class<id
<title></title>
<style type ="text/css">
div
{
width:100px;
height:20px;
border:solid 1px red;
}
</style>
<body>
<div></div>
</body>
（2）class选择器
<title></title>
<style type ="text/css">
div
{
width:100px;
height:20px;
border:solid 1px red;
color:green;
}
.c1
{
color:#F00(文字颜色); (文字颜色显示class里面设置的颜色)
}
.c2
{
font-size:36px;
}
</style>
<body>
<div> 你好1</div>
<div class=“c1 c2”> 你好2</div> 如果c1跟c2的样式有重复，c2的样式会将c1的样式覆盖了
<p class="c1">p标签也可以使用class选择器</p> 多个标签可以共用一个class,一个标签可以写多个class
</body>
（3）id选择器
<title></title>
<style type ="text/css">
div
{
width:100px;
height:20px;
border:solid 1px red;
color:green;
}
.c1
{
color:#F00(文字颜色); (文字颜色显示class里面设置的颜色)
}
.c2
{
font-size:36px;
}
#d1
{
color:green;
}
</style>
<body>
<div> 你好1</div>
<div class=“c1 c2”> 你好2</div> 如果c1跟c2的样式有重复，c2的样式会将c1的样式覆盖了
<p class="c1">p标签也可以使用class选择器</p> 多个标签可以共用一个class,一个标签可以写多个class
<div id="d1" class = "c1">你好3</div> id不能重复也不能是多个的，显示d1的样式，因为优先级：标签选择器<class<id
</body>
3、链接式
<title>标题</title>
<link rel = "stylesheet" type="text/css" href="css/demo.css(相对路径)"/>
4.导入样式（基本不用了，整个网页内容加载之后，才去加载样式表）
<title>标题</title>
<link rel = "stylesheet" type="text/css" href="css/demo.css(相对路径)"/>
<style>
@import url(css/demo.css)
</style>
当同时有行内样式，内嵌式，链接式出现时，采取就近原则； css的注释： /* */ Html的注释：<!-- -->
二：css字体样式
#d1
{
font-size:24px;(字体大小)
font-family:"隶书"；（字体类型，电脑中有什么字体才能设置什么字体，C:\Windows\Fonts中看）
font-weight:700;(文字粗细，数值越大，字体加粗越厉害)
color:red;(字体颜色)
Text-decoration:underline /*下划线*/
Text-decoration:overline /*顶划线*/
Text-decoration:line-through; /*删除线*/
width:100px;
height:100px;
border:solid 1px red;
text-align:center/right/left(默认left);(水平居中)
line-height:100px;(lineheight值与高度相同)（垂直居中）
Text-transform:capitalize /*单词首字大写*/
Text-transform:uppercase /*全部大写*/
Text-transform:lowercase /*全部小写*/
Letter-spacing:10px (默认为normal)（字符间距）
}
<div id="d1"><p>google（这里的p标签只继承了文字的特性）</p></div>
计算机-工具-文件夹选项-查看，找到显示文件扩展名那一栏，可显示文件的扩展名；
FScapture(取色，测量，可以去掉电脑上任何一个地方的颜色)
