css学习笔记-1
css与html连接
<!--css与html合并-->
<style>css</style>
<!--css与html分离-->
<link href="css文件路径" rel="stylesheet">
选择器
基础选择器
/*类选择器*/
.intro{} /*选择所有class="intro"元素*/
/*class属性可以多值，以空格分隔，如class="box cl"*/
/*id选择器*/
#firstname{} /*选择所有id="firstname"元素*/
/*id值唯一不复用*/
/*标签选择器*/
p{} /*选择所有<p>元素*/
/*通配符选择器*/
*{}/*选取页面中所有元素*/
复合选择器
/*并集选择器*/
div,
p,
.nav{}/*选择所有<div>、<p>和class="nav"的元素,尽量竖着写*/
/*子元素选择器*/
div>p{}/*选择距父元素<div>最近的所有<p>元素*/
/*后代选择器*/
div p{}/*选择元素<div>中的所有<p>元素*/
/*伪类选择器*/
a:link{}/*选择所有未被访问的链接*/
a:visted{}/*选择所有已被访问的链接*/
a:hover{}/*选择所有鼠标位于其上的链接*/
a:active{}/*选择活动链接*/
/*focus选择器*/
input:focus{}/*把获得光标的input表单元素选取出来，主要针对表单元素*/
/*其他*/
div+p{}/*选择紧接在<div>元素之后的所有<p>元素*/
[target]{}/*选择带有target的所有元素*/
[target="_blank"]{}/*选择target="_blank"的所有元素*/
[title~=flower]{}/*选择title属性包含单词'flower'的所有元素*/
[lang|=en]{}/*选择lang属性值以"en"开头的所有元素*/
选择器优先级
id选择器>类选择器>标签选择器>通配符选择器
字体属性
/*字体*/
font-family: "Microsoft YaHei";
/*可定义多个字体，用逗号隔开，优先级从左往右逐渐降低*/
/*大小*/
font-size: 20px;
/*chrome默认16px*/
/*粗细*/
font-weight: 700;
/*属性值：normal(默认)=400、bold(加粗)=700、bolder(特粗)、lighter(细体)，数字不跟单位*/
/*样式*/
font-style: italic;/*字体倾斜*/
font-style: normal;/*倾斜字体不倾斜*/
/*复合属性*/
/*font: font-style font-weight font-size/line-height font-family*/
font: italic 700 16px Microsoft YaHei';
/*空格隔开，顺序固定，font-size、font-family不能省略*/
文本属性
/*颜色*/
color: red;
/*属性值：预定义(red、blue等)，十六进制(#FF0000)，RGB代码(rgb(255,0,0)或rgb(100%,0%,0%))*/
/*对齐*/
text-align: center;
/*只能设置水平对齐，属性值：center、left(默认)、right*/
/*装饰*/
text-decoration: underline;
/*属性值：none(默认，无装饰线)，underline(下划线，<a>自带)，overline(上划线)，line-through(删除线)*/
/*文本缩进*/
text-indent: 20px;
/*值可正可负，2em两个文字大小距离*/
/*行高*/
line-height: 20px;
样式表
行内样式表
/*写在元素标签内部的style属性中，适合修改简单样式*/
<div style="color: red; font-size: 20px;"></div>
内部样式表
/*写在html页面内部，将所有css代码放到一个<style></style>标签中,控制整个html页面*/
<head>
<style>
.box{
width: 100px;
hight: 100px;
}
p{
text-indent: 20px;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
外部样式表
/*css与html完全分离，需引入*/
<head>
<link rel="stylesheet" href="***.css">
</head>
<body>
<div class="box">
<p></p>
</div>
</body>
.box{
width: 100px;
hight: 100px;
}
p{
text-indent: 20px;
}
元素显示模式
块元素
<!--独占一行，可设置宽高-->
<!--常见块级元素-->
<div></div>
<h1></h1>...<h6></h6>
<p></p>
<ul></ul>
<ol></ol>
<li></li>
<!--文字类块级元素内不能放块级元素-->
行内元素
<!--一行内能放多个，不能直接设置宽高，默认内容宽度-->
<!--行内元素内只能容纳其他行内元素，链接内不能放链接-->
<!--相邻行内元素（在同一行）间有空白间隙，宽度等于内容宽度-->
行内块元素
<!--同时拥有行元素和块元素特点，可设置宽高、相邻元素间(同行)有空隙等-->
<img>
<input>
<td>
行内元素与块元素相互转换
<!--转换为块元素-->
display: block;
<!--转换为行内元素-->
display: inline;
<!--转换为行内块元素-->
display: inline-bock;
文字垂直居中
css没给垂直居中代码
小技巧：使盒子高度与行高相等，line-height=height.
