目录
创建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>