2020-08-25
程序员文章站
2022-04-25 11:16:55
...
Css的基本概念
Cascading style sheet 层叠样式
选择器标签：p，div…之类的标签 使用方式：直接输入标签名
类（class）：class名字 使用方式：输入点+class名
Id：id名 使用方式：输入#+id名
一般来说我们写css文件的时候用的都是第二种选择器，class名 这是因为id名一般被用作js的选择器
给class命令也是有规范的，像xxx-xxxx这样
三种链接样式
行内样式（内嵌样式）<h1 style="color: aqua;">绝句</h1>
直接写在标签里，使用style属性，只对当前标签有效，页面内容和表现形式是高度耦合的，不利于分工合作
内部样式（内联样式）：
<style type="text/css">
p{
font-size: 24px;
}
</style>
内部样式是在head部分使用<style>标签，样式对当前页面有效，内容和表现形式实现了一定程度的分离，但不彻底
外部样式（外联样式）
.poetry{
text-align: center;
}
p{
font-size: 24px;
}
#text{
color: red;
}
.text1{
text-align: right;
}
.text3{
text-align: left;
font-family: "仿宋";
/* 字体样式 */
font-size: 50px; /* 字体大小 */
font-style: italic; /* 字体倾斜 */
font-weight: bold; /* 字体粗细 */
}
外部样式需要一个link标签来与html链接起来，内容与表现形式完全分离，而且任何需要用到改样式的页面都可以通过link标签链接的方式来实现
字体相关属性
Text-align：center（居中）/left（靠左）/right（靠右） 对齐方式Font-size：56px/24px/xxpx 字体大小
Fant-family：“黑体”/“幼圆” 字体样式
Font-style：italic（倾斜）/normal（正常）
Font-weight：100/200/normal（400）/bold（700）/bolder 字体粗细
Fant-variant：normal/small-caps（小型大写） 是否大写
Color：blue/red/pink/black/green/#ffffff/#f6f6f6 字体颜色
Text-decoration：none （默认格式，无）/underline（下划线）/overline（上划线）/line-through（删除线）
Direction（文本方向）：ltr（left to right 从左到右）/rtl（right to life 从右到左）
Text-tranform（大小写）：none（默认）/capitalize(首写字母大写)/uppercase（全部大写）/lowercase（全部小写）
Line-height：normal/xx px
Letter-spacing（字符间距）：2px/5px/xxxpx
word-spacing(单词间距)：normal/2px/5px/xxxpx
案例：望月怀远
海上生明月，天涯共此时。 /大小24px 字体楷体 靠左 情人怨遥夜，竟夕起相思。 /颜色红色， 靠右 灭烛怜光满，披衣觉露滋。 /左半句靠左，有半句靠右 不堪盈手赠，还寝梦佳期。 /大小30px 颜色蓝色 字体幼圆 居中 源代码:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css</title>
<style type="text/css">
p{
font-size: 24px;
}
.text{
font-size:24px ;
font-family: "楷体";
text-align: left;
}
.text1{
text-align: right;
color: red;
}
.text2{
text-align: left;
display: inline-block;
}
.text3{
display: inline-block;
text-align: right;
margin-left: 1710px;
}
.text4{
font-size: 30px;
color: aqua;
font-family: "幼圆";
text-align: center;
}
</style>
</head>
<body>
<div class="poetry">
<h1 >望月怀远</h1>
<p class="text">海上生明月，天涯共此时。</p>
<p class="text1">情人怨遥夜，竟夕起相思。</p>
<span class="text2">灭烛怜光满，</span><span class="text3">披衣觉露滋。</span>
<p class="text4">不堪盈手赠，还寝梦佳期。</p>
</div>
</body>
</html>
上一篇： Spring Data JPA 分页
下一篇： Spring Data Jpa分页显示