css插入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css简介和样式插入方式</title>
<link rel="stylesheet" type="text/css" href="base.css">
<style type="text/css">
div
{
border:2px solid #DE1E1E;
margin:2px 2px 2px 2px;
}
.divcss
{
border:2px dotted #4B95D2;
}
.pcss
{
color:red; /*颜色*/
font-family: 宋体; /*字体*/
font-size:24px; /*字号*/
font-weight: bold; /*加粗*/
font-style: italic; /*斜体*/
text-decoration: underline; /*下划线*/
text-indent: em; /*首行缩进*/
line-height: 1em; /*行高*/
letter-spacing:10px; /*字间距*/
}
span
{
color:blue;
font-size:24px;
}
.divid
{
color:#EED71D;
font-size:24px;
}
</style>
</head>
<body>
<div id="css简介" class="divcss">
<p class="pcss">
css全称为“层叠式样式表”。<br/>
是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言<br/>
选择符{属性：值}<br/>
选择符：又称选择器，指明网页中要应用样式规则元素<br/>
</p>
</div>
<div id="样式插入方式" class="divcss">
<div id="内联式">
<p>
一个人可以<span style="color:red;font-size:24px">毫无道理</span>跟你做一辈子亲戚,但一个人不会毫无道理跟你做一辈子朋友
</p>
</div>
<div id="嵌入式">
<p>
一个人可以<span >毫无道理</span>跟你做一辈子亲戚,但一个人不会毫无道理跟你做一辈子朋友
</p>
</div>
<div id="外部式">
<p>
一个人可以<em>毫无道理</em>跟你做一辈子亲戚,但一个人不会毫无道理跟你做一辈子朋友
</p>
</div>
<div id="优先级" class="divid">
内联式、嵌入式、外部式都遵循就近原则进行调用。
</div>
</div>
</body>
</html>css选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
div
{
border:2px dashed #F03A3A;
}
*{
color:#24D1A9;
}
h3
{
font-style:italic;
color:red;
}
.lei
{
color:blue;
font-weight: bold;
}
#idcss
{
color: yellow;
text-decoration: underline;
}
.firsta>li
{
color: #ACD819;
}
.firstb li
{
color: #ACD819;
}
a:hover
{
color:red;
}
</style>
</head>
<body>
<div id="元素选择符">
<p>
通配选择符：*{...}<br/>
使用所有标签。
</p>
<p>
类型选择符：标签名称{...}<br/>
<h3>这是一个类型选择符</h3>
</p>
<p>
类选择符：.类名{...}<br/>
这是一个<span class="lei">类选择符</span>
</p>
<p>
ID选择符：#类名{...}<br/>
这是一个<span id="idcss">ID选择符</span>
</p>
</div>
<div id="关系选择符">
<ul class="firsta">
<li>水果</li>
<ol>
<li>苹果</li>
<li>桃子</li>
</ol>
<li>电子产品</li>
<li>，，，，</li>
</ul>
</div>
<div id="关系选择符">
<ul class="firstb">
<li>水果</li>
<ol>
<li>苹果</li>
<li>桃子</li>
</ol>
<li>电子产品</li>
<li>，，，，</li>
</ul>
</div>
<div id="伪类选择符">
<a target="_blank" href="http://www.baidu.com">点击取百度</a>
</div>
</body>
</html>文字排版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字排版</title>
<style type="text/css">
body
{
font-family: 华文行楷;
font-size:48px;
color:#20B3E0;
font-weight:bold;
font-style:italic;
text-decoration: underline;
text-decoration-color: #F31818;
text-indent:2em;
line-height: 1.5em;
letter-spacing: 3px;
}
</style>
</head>
<body>
<div>
<p>
当不幸降临在他人头上时，他们往往都能像智者一样劝慰别人；而当同样的不幸降临自己身上时，人往往很难同样地开导自己。人最大的不智不是不知道，而是知道了却迟迟不愿去做，所以平庸却又自怜的人很多。
</p>
</div>
</body>
</html>点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦