Web前端开发-CSS核心属性
Web前端开发，自学笔记整理
CSS核心属性
1.核心属性
01-CSS核心属性.html
<html>
<head>
<meta charset="UTF-8">
<title>CSS核心属性title>
<style type="text/css">
.test1 {
/*1.宽度*/
width: 400px;
/*2.高度*/
height: 300px;
/*3.背景*/
/*颜色单词*/
/*background: red;*/
/*颜色16进制*/
/*background: #71d232;*/
/*颜色三原色RGB a表示透明度*/
/*background: rgb(26,162,97);*/
background: rgba(26,162,97,1);
/*4.字体颜色*/
color: white;
/*5.字体大小（默认16px）*/
font-size: 30px;
/*6.字体类型*/
font-family: "微软雅黑","宋体";
/*7.字体加粗
bold/bolder/100-900（常规500）/normal
*/
font-weight: normal;
/*8.字体倾斜*/
font-style: italic;
/*9.大小写
small-caps
all-small-caps
*/
font-variant: all-small-caps;
/*10.水平对齐方式 left/right/center/justify */
text-align: justify
}
.test2 {
width: 150px;
height: 50px;
background: red;
color: white;
/*11.垂直对齐方式 top/middle/bottom*/
/*vertical-align: middle;*/
/*行高
多行：行间距
单行：位置 (行高=容器高度 居中)
*/
line-height: 50px;
}
.main {
width: 150px;
height: 150px;
/*倍行高
倍数和字体大小有关，如果字体为13px，2倍行高就是26px
*/
line-height: 2em;
/*line-height: 30px;*/
}
ul {
background: lightblue;
/*12.无序列表样式*/
/*简写*/
/*list-style: none;*/
list-style: circle inside;
/*显示图片*/
/*list-style-image: url(img.png);*/
/*列表符号位置 inside/outside*/
/*list-style-position: outside;*/
/*disc实心圆、circle 空心圆、square实心方块、none不显示*/
/*list-style-type: square;*/
}
li {
line-height: 30px;
}
.test3 {
/*13.文本属性*/
/*line-through删除线*/
/*text-decoration: line-through;*/
/*underline下划线*/
/*text-decoration: underline;*/
/*overline上划线*/
text-decoration: overline;
}
a {
/*none 去掉划线*/
text-decoration: none;
}
span {
font-size: 25px;
}
.car {
color: red;
}
.price-1 {
color:red;
text-decoration: line-through;
}
.price-2 {
color: red;
text-decoration: line-through;
}
.price-3 {
color: purple;
text-decoration: overline;
}
.phone {
font-style: italic;
font-size: 20px;
text-decoration: underline;
}
.box {
width: 300px;
height: 300px;
/*14.背景样式*/
/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url(qq.png);
/*背景平铺方式
repeat 平铺（默认）
no-repeat 不平铺
repeat-x 水平方向平铺
repeat-y 垂直方向平铺
*/
background-repeat: no-repeat;
/*背景大小*/
background-size: 100px 100px;
/*背景位置
水平方向：left/center/right/具体数值
垂直方向：top/center/bottom/具体数值
*/
background-position: center;
}
style>
head>
<body>
<p class="test1">
你可以不聪明，但不可以不努力！
hello WORLD！
p>
<div class="test2">HTMLdiv>
<p class="main">
你可以不聪明，但不可以不努力！你可以不聪明，但不可以不努力！你可以不聪明，但不可以不努力！
p>
<br />
<ul>
<li>HTMLli>
<li>CSSli>
<li>JavaScriptli>
ul>
<br />
<p class="test3">HTMLp>
<a href="01-CSS核心属性.html">谷歌一下a>
<br />
<div class="test4">
<span class="car">特斯拉电动跑车span>新上市，不要<span class="price-1">99span>，只要<span class="price-2">69span>，VIP价<span class="price-3">59span>，心动不如行动，赶快拿起电话预约吧(<span class="phone">82008820span>), 电话预约购买赠送充电卡一张。
div>
<br />
<div class="box">div>
body>
html>2.浮动
02-浮动.html
<html>
<head>
<meta charset="UTF-8">
<title>浮动title>
<style type="text/css">
/*浮动存在的问题：层级、大小*/
.box {
width: 299px;
height: 300px;
background: red;
}
.view {
width: 100px;
height: 100px;
}
.view1 {
background: purple;
/*float: left;*/
float: right;
}
.view2 {
background: lightblue;
/*float: left;*/
float: right;
}
.view3 {
background: green;
/*float: left;*/
float: right;
}
style>
head>
<body>
<div class="box">
<div class="view view1">div>
<div class="view view2">div>
<div class="view view3">div>
div>
body>
html>3.盒子模型
03-盒子模型.html
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型title>
<style type="text/css">
.box {
width: 100px;
height: 100px;
background: red;
/*padding 内边距
一般用于调整盒子内容位置
*/
/*padding-left:20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;*/
/*一个值时：四个方向*/
/*padding:30px;*/
/*两个值时：上下、左右*/
/*padding:30px 50px ;*/
/*三个值时：上、左右、下*/
/*padding:20px 30px 10px;*/
/*四个值时：上、右、下、左*/
padding: 10px 20px 30px 40px;
/*border 边框*/
/*solid实线，dashed虚线，dotted点状线，double双线，none无*/
border-style: double;
border-width: 10px;
border-color: blue;
/*margin 外边距
一般用于调整盒子位置
*/
/*margin-left: 30px;
margin-top: 30px;
margin-right: 30px;
margin-bottom: 30px;*/
/*margin: 10px;
margin: 10px 20px;
margin: 10px 20px 30px;*/
margin: 10px 20px 30px 40px;
}
style>
head>
<body>
<div class="box">
div>
body>
html>