标签：截图 color background world 基本操作 20px font hello CSS
目录
创建CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建CSS</title>
<!--文档内嵌样式表,其中还有一个是外部样式表，那个是在外面新建一个CSS文档把a的内容放里面就行了，它适用于所有的html文件-->
<!--其中元素内嵌样式表的优先级高于文档内嵌样式表高于外部样式表-->
<style type="text/css">
a{
font-size: 30px;
color: #9e61ff;
}
</style>
</head>
<body>
<a>hello world</a>
<br>
<!--使用元素内嵌样式表，属性可以设置字体大小和颜色,其中颜色是RGB三原色构成-->
<a style="font-size: 40px;color: #ff7e44">hello world</a>
</body>
</html>运行结果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建边框和背景</title>
<style>
.c{
border-width: 5px;
border-color: #9d59ff;
border-top-color: #b1ff42;
border-style: solid;
border-bottom-style: dashed;
}
.s{
width: 677px;
height: 677px;
border: 5px solid red;
border-top: 10px dashed yellow;
background: #9d59ff;
background-image: url("网络头像.JPG");
}
</style>
</head>
<body>
<p class="c">hello world</p>
<p class="s">hello css</p>
</body>
</html>运行结果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<style type="text/css">
a {/*这是a元素的效果，这里可以用a，同时也可以用自定义的.class1或#id还有属性[href]来特定指定某个元素*/
font-size: 40px;
color: #9e61ff;
}
a:hover{/*冒号属性是当鼠标经过的时候的样式*/
font-size: 60px;
color: red;
}
p {/*这是p元素的效果，如果这里的p换成*就是所有元素的效果*/
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<a class="class1">hello world</a><!--这里的class属性是所有的元素都具有的属性,class属性的值可以重复使用-->
<br>
<a id="id">hello world</a><!--这里的id的值不能重复使用，使用的话会有红线，因为id是唯一标识-->
<br>
<a href="https://blog.csdn.net/HeZhiYing_">hello world</a>
<p>hello world</p>
<h1>hello world</h1>
</body>
</html>运行结果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建文本样式</title>
<style type="text/css">
.class1{
text-align: center;/*这是居中*/
direction: ltr;/*从左到右排列*/
word-spacing: 50px;/*单词间间距*/
letter-spacing: 10px;/*字母间间距*/
}
.class2{
line-height: 200px;/*设置行高，也是行与行之间的间距*/
text-indent: 50px;/*设置首行缩进*/
text-decoration: underline;/*设置下划线，其中overline是设置上划线line-through是设置删除线*/
text-transform: capitalize;/*设置首字母大写，其中uppercase是全部大写，lowercase是全部小写*/
}
</style>
</head>
<body>
<p class="class1">hello world</p>
<p class="class2">hello worldhello worldhello worldhello worldhello worldhello worldhello world</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建文本样式</title>
<style type="text/css">
.class1{
font-family: 微软雅黑;/*设置字体名称*/
font-size: 40px;/*设置字体大小*/
font-style: italic;/*设置字体样式*/
}
.class2{
font-variant: small-caps;/*全部小写变大写*/
font-weight: 900;/*设置加粗，可以自定义，也可以用bolder等*/
text-shadow: 1px 8px 2px;/*设置水平偏移竖直偏移和模糊程度*/
}
</style>
</head>
<body>
<p>hello world</p>
<p class="class1">hello world</p>
<p class="class2">hello world</p>
</body>
</html>运行结果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建文本过度</title>
<style type="text/css">
p{
width: 100px;
height: 100px;
background-color: antiquewhite;
}
p:hover{
width: 200px;
height: 200px;
background-color: #864eff;
transition-delay: 150ms;/*当鼠标点上后的延迟时间*/
transition-duration: 500ms;/*中间动画的时间*/
}
</style>
</head>
<body>
<p></p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用变换</title>
<style type="text/css">
p{
width: 100px;
height: 100px;
background-color: antiquewhite;
}
p:hover{
width: 100px;
height: 100px;
background-color: antiquewhite;
transform: rotate(30deg);/*默认是以中心点顺时针旋转30度*/
transform-origin: top right;/*设置以右上角点开始,这里也可以写例如10px 20px为距坐是10px像素距上是20px像素位置*/
/*transform: scale(2);!*整体放大2倍*!*/
/*transform: scale(2);!*横向放大2倍*!*/
/*transform: scale(2);!*纵向放大2倍*!*/
}
</style>
</head>
<body>
<p></p>
</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style type="text/css">
.class1{
border: 1px solid black;
background-color: antiquewhite;/*背景颜色*/
background-clip: content-box;/*设置背景只在内容区域显示*/
padding-top: 20px;/*上边内边距*/
padding-left: 20px;/*左边内边距*/
padding-right: 20px;/*右边内边距*/
padding-bottom: 20px;/*下边内边距*/
/*padding: 80px 60px 40px 20px;!*距上右下左的距离*!*/
margin-top: 50px;/*上边外边距*/
margin-right: 50px;/*右边外边距*/
margin-left: 50px;/*左边外边距*/
}
</style>
</head>
<body>
<div class="class1">hello world</div>
</body>
</html>
标签：截图,color,background,world,基本操作,20px,font,hello,CSS 来源： https://blog.51cto.com/u_15065305/2979556
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。