css基础
font-family 字体 eg: Microsoft-Yahei
font-size/color 字号/颜色
font-weight:bold 粗体
font-style:italic 斜体
text-decoration:underline 下划线
text-decoration: line-through 删除线
text-indent: 2em 缩进文字的2倍大小
line-height: 1.5em 行间距,1.5倍文字大小
letter-spacing: 50px 字间距,字母间距
word-spacing: 50px 单词与单词间距
text-align: center/left/right 居中/居左/居右
color.rgb(255.255.255);参数是0-255的数,可自调颜色
background-image: url(1.png) 背景图
background-repeat: repeat-y/repeat-x/no-repeat; 图片按列/行/角排
background-position:right center/centera center; 图片位置靠右居中
以上可以缩写为:background:red ur(1.png) no-repeat center;
border:solid 1px red; 边框属性
ul, ol{list-style:...}列表属性
display:block/inline/none; 内联和块级切换/隐藏
===========================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入外部css文件 外部样式-->
<link rel="stylesheet" href="./demo.css">
<style>
/*内部样式*/
/*div{*/
/* width: 200px;*/
/* height: 200px;*/
/* */
/*}*/
</style>
</head>
<body>
<!--添加样式 1, 内联样式-->
<!--px 像素 width:宽度 height:高度 font-family:'宋体';">颜色 ;分号隔开-->
<!-- <div style="width: 100px;height: 100px;你好</div>-->
<!-- <div style="width: 100px;height: 100px;你好</div>-->
<div>我是一个大盒子</div>
<!--如果只是平时的练习,那么建议写载style标签中(内部样式)-->
<!--做项目,做网页.建议引入外部css文件(外部样式)-->
<!--内联样式不推荐使用-->
<!--权重: 内联>内部>外部 选择最近的文件-->
</body>
</html>
==================================
<title>Title</title>
<style>
/*class选择器*/
.box{
width: 200px;
height: 200px;
background-color: blue;
}
/*id选择器 id是唯一的*/
#kehao{
width: 200px;
height: 300px;
background-color: aqua;
}
</style>
</head>
<body>
<!--class 分类-->
<div class="box"></div>
<div class="box" id="kehao"></div>
<div class="box"></div>
<p class="box">你好</p>
<!--权重 id>class>标签-->
============================
<style>
/*后代选择器*/
/*div p{*/
/* !*字体颜色*!*/
/* color: crimson;*/
/*}*/
/*子代选择器*/
div>p{
color: greenyellow;
}
div>h2>p{
color: green;
}
</style>
</head>
<body>
<div>
<p>哈哈哈</p>
<p>嘻嘻嘻嘻</p>
</div>
<div>
<h2>
<p>123456</p>
<p>上山打老虎</p>
</h2>
</div>
========================
<style>
/*兄弟选择器*/
/*div~p{*/
/* color: green;*/
/*}*/
/*相邻选择器 +*/
div+p{
color: red;
}
</style>
</head>
<body>
<!--兄弟选择器,同级关系-->
<div>我是div盒子</div>
<p>我是与众不同的p标签</p>
<div>
<span>我是span盒子</span>
</div>
<p>我是p标签</p>
<p>我是也p标签</p>
=========================
<style>
/*给class为box的div添加样式*/
/*首先你是一个div,其次你的class为box*/
/*div.box{*/
/* width: 100px;*/
/* height: 100px;*/
/* */
/*}*/
/*.a1{*/
/* width: 200px;*/
/* height: 200px;*/
/* */
/*}*/
/*.box{*/
/* width: 300px;*/
/* height: 300px;*/
/* */
/*}*/
.box{
width: 100px;
height: 100px;
background-color: yellowgreen;
}
.a1{
background-color: red;
}
</style>
</head>
<body>
<div class="box a1">我是一个div</div>
<p class="box">我是一个p标签</p>
==========================
<style>
/*未被点击时的状态,如果先前点击过,则阅览器会有缓存*/
a:link{
color: yellow;
}
/*已经被点击过的链接*/
a:visited{
color: green;
}
/*鼠标悬停*/
a:hover{
color: pink;
}
/*鼠标点击未释放*/
a:active{
color: black;
}
/*如果对一个链接添加以上四种选择器,则一定要按照上述的顺序,否则无法实现*/
p:hover{
color: darkgoldenrod;
}
</style>
</head>
<body>
<a href="#">点我一下试试</a>
<p>我是p标签</p>
===================
<style>
/*针对有焦点的标签*/
input:focus{
background-color: green;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入">
======================
<style>
div,p,ul>li{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>div盒子</div>
<p>p标签</p>
<ul>
<li>我是li标签</li>
<li>我是li标签</li>
<li>我是li标签</li>
</ul>
=======================
<style>
p{
/*字体*/
/*font-family: '宋体','微软雅黑';*/
/*字体的样式 noarmal 空 obkique 斜体 inherit继承父类的字体*/
/*font-style: inherit;*/
/*字体的粗细 */
/*font-weight: 700;*/
/*字体大小 px em以父盒子未基准 rem以跟标签为基准(网页设置为标准) */
/*font-size: 2rem;*/
/*复合样式 font-size font-family 必须有,没有会报错*/
font:oblique bold 18px '宋体';
}
</style>
</head>
<body>
<p>分离是未了更好的冲锋</p>
======================
<style>
/*p{*/
/*对齐方式 center left right*/
/*text-align: center;*/
/*文字缩进*/
/*tab-indent: 32px;*/
/*词间距 只适用英文*/
/*word-spacing: 20px;*/
/*字间距*/
/*letter-spacing: 10px;*/
/*文字线条 none清除划线(默认) underline下面 overline上面 line-through中间*/
/*text-decoration: line-through;*/
/*color: black;*/
/*background-repeat: repeat-y;*/
/*}*/
/*span{*/
/* letter-spacing: 1em;*/
/*}*/
/*去掉a标签的下划线*/
/*a{*/
/* text-decoration: none;*/
/* color: blueviolet;*/
/*}*/
/*如果想要让文字进行垂直居中,则设置行高,跟盒子的高度一样!!*/
div{
width: 50px;
height: 30px;
background: green;
line-height: 30px;
}
</style>
</head>
<body>
<!-- <p>helloworld</p>-->
<!-- <p>天不生我流川枫,剑道万古如长青</p>-->
<!-- <a href="#">我是一个a标签</a>-->
<div>heool</div>
===================
<style>
p{
width: 200px;
height: 100px;
background-color: pink;
/*超出隐藏 hidden隐藏 scroll滚动条*/
/*overflow: hidden;*/
overflow: scroll;
/*文字超出用省略号表示*/
text-overflow: ellipsis;
/*不换行,一行显示*/
white-space: nowrap;
}
</style>
</head>
<body>
<p>
卡加斯卡加斯蝴蝶卡斯柯达即可阿瑟大声地
卡加斯卡加斯蝴蝶卡斯柯达即可阿瑟大声地
卡加斯卡加斯蝴蝶卡斯柯达即可阿瑟大声地
</p>
=======================
<style>
div{
width: 100px;
height: 100px;
background: blueviolet;
}
span{
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div>大盒子</div>
<span>小盒子</span>
<!-- 块级元素:独占一行,可以设置高度 h1-h6 div p li -->
<!-- 行内元素: 不支持宽高,一行可以有多个 span a -->
<!-- 行内块元素:即有块级元素的特点(设置宽高),也有行内元素的特点(一行有多个) img input td-->
=============================
<style>
div{
/*设置显示形式 block(默认) inline-blck(可以设置宽高) inline(不可以设置宽高) none(隐藏)*/
display: inline;
width: 100px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div>大盒子</div>
<div>大盒子</div>
