css的基本概念
（Cascading Style Sheet）层叠样式表
选择器
标签：< p> < div>….之类的标签 使用方式：直接输入标签名
类（class）：class名字 使用方式：输入点+class名字
ID：ID名 使用方式：输入#+id名字
一般来说我们写CSS文件的时候使用的都是第二种选择器.class名；这是因为ID名一般被作JS的选择器
给class命名也是有规范的，像xxx-xxx这样做的好处是让你的代码更清晰，别人也更容易看懂
三种连接方式
（1）行内样式（内嵌样式）
直接写在标签里面，使用style属性，只对当前标签有效，页面内容和表现形式是高等耦合的，不利于分工合作
<h1 style="color: blue">绝句</h1>
（2）内部样式（内联样式）
<style type="text/css">
p{
font-size: 24px;
}
</style>
内部样式是在head部分使用< style>属性，样式对当前页面有效，内容和表现形式实现了一定程度的分离，但不彻底
（3）外部样式（外联样式）
.poetry{
text-align: center;
}
#text1{
color: red;
}
外部样式需要一个link标签来与html连接起来，内容与表现方式完全分离，而且任何需要用到改样式的页面都可以通过link标签连接的方式来实现
字体相关属性
text-align（对齐方式）： center（居中）、left（居左）、right（居右）
font-size（字体大小）： 56px、24px、xxpx
font-famliy（字体体系）： “黑体”、“幼圆”
font-style（是否倾斜）: italic（倾斜）、normal（正常）
font-weight（字体粗细）： 100、200、normal（400）、bold（700）、bolder
font-variant（是否大写）： normal、small-caps（小型大写）
Color（字体颜色）： blue、red、pink、#FFFFFF、#FF0000
text-decoration： none（默认格式，无）、underline（下划线）、overline（上划线）、line-through（删除线）
direction（文本方向）： ltr（left to right 从左到右）、rtl（right to left从右到左）
text-transform（大小写）： none（默认）、capitalize（首字母大写）、uppercase（全部大写）、lowercase（全部小写）
line-height（行高）： normal/ xx px
letter-spacing（字符间距）： 2px / 5px / xxpx
word-spacing（单词间距）： normal/2px/ xx px
案例：望月怀远
海上生明月，天涯共此时。 /*大小24px 字体楷体*/
情人怨遥夜，竟夕起相思。 /*颜色红色，靠右*/
灭烛怜光满，披衣觉露滋。 /*左半句靠左，右半句靠右*/
不堪盈手赠，还寝梦佳期。 /*大小30px 颜色蓝色 字体幼圆 居中*/
案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例</title>
</head>
<link rel="stylesheet" href="css/css02.css">
<body>
<h1>望月怀远</h1>
<p class="text1">海上生明月，天涯共此时。</p>
<p class="text2">情人怨遥夜，竟夕起相思。</p>
<div><span style="float: left">灭烛怜光满，</span>
<span style="float: right">披衣觉露滋。</span></div><br>
<p class="text4">不堪盈手赠，还寝梦佳期。</p>
所采用的css样式
.poetry{
text-align: center;
}
#text1{
color: red;
}
.text2{
text-align: left;
}
.text3{
font-family: "宋体";
/*字体样式*/
font-size: 50px;
/*字体大小*/
font-style: italic;
/*字体倾斜*/
font-weight: bold;
/*字体粗细*/
}
.text4{
text-align: right;
效果图
以上关于css的介绍以及使用！
1775
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
