CSS 三种导入样式
CSS个人整理
span标签
span标签: 重点突出的字, 使用span套起来
<style>
#sdq1{
color: blue;
}
</style>
<body>
我叫<span id="sdq1">史迪奇</span>
</body>
|
字体风格
<style>
body{
font-family: "Arial Black", 楷体; //字体
color:blue;
}
h1{
font-size: 50px; //字体大小
}
.sdq1{
font-weight: bolder; //粗体
}
p{
font: oblique bolder 12px "楷体"; //斜体oblique粗细bolder大小12px
color:blue;
}
</style>
<body>
<h1>史迪奇的故事</h1>
<p class="sdq1">生物史迪奇</p>
<p>5岁女孩莉萝聪明善良, 她最爱听猫王的老歌, 也一直梦想拥有一只属于自己的宠物狗</p>
<p>史迪奇只能把自己的两只脚藏起来, 外表看起来和别的小狗一样</p>
<p>当外星人终于在地球上发现了伪装的史迪奇时, 他们绑架了莉萝想逼史迪奇就范, 为了救回自己的好朋友, 也为了证明自己不是无可救药的危险分子, 史迪奇只有使出浑身解数, 放手一搏了</p>
<body>
|
文本样式
装饰
<style>
h1{
color:blue; //颜色
text-align: center; //文本对齐的方式
text-indent: 2em; //首行缩进
line-height: 20px; //行高
text-decoration: overline; //上划线
text-decoration: line-through; //中划线
text-decoration: underline //下划线
}
img,span{
vertical-align: middle;
}
</style>
<h1>史迪奇的王国</h1>
<p>
<img src="images/x.jpg">
<span>史迪奇</span>
</p>
|
超链接伪类
<style>
//默认颜色
a{
text-decoration: none;
color: #000000;
}
//鼠标悬浮状态
a:hover{
color: blue;
}
//鼠标按住未释放状态
a:active{
color: rad;
}
</style>
<p>
<h1>史迪奇的王国</h1>
<a>史迪奇<a>
</p>
|
阴影
<style>
//默认颜色
#sdq{
text-shawdow: blue 10px 10px 10px; //text-shawdow是阴影, 阴影颜色, 水平偏移, 垂直偏移, 阴影半径
}
</style>
<p>
<h1>史迪奇的王国</h1>
<a id="sdq">史迪奇<a>
</p>
|
作者: 我叫史迪奇
本文来自于:
https://sdq3.link/CSS%E4%B8%89%E7%A7%8D%E5%AF%BC%E5%85%A5%E6%A0%B7%E5%BC%8F.html博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议