CSS学习笔记
一.什么是CSS
1.CSS的作用：
对页面样式的统一定义
a.早期，依靠html元素的属性，比如border/align
b.不尽相同--混乱
c.标准：某种样式声明，所有的元素通用
2.CSS的基础语法
样式属性：值；样式属性：值；.......--只能用于内联样式
选择器{样式声明}---内部样式表
注释：/*注释内容*/
3.如何使用
a.用法一（内联样式）：将样式定义在元素的style属性里---没有重用性
b.用法二（内部样式表）：将样式定义在head元素里的style里---仅限于当前文档范围重用
c.用法三（外部演示表）：将样式定义在单独的.CSS文件里，由页面引入它---可维护性和可重用性的提高，实现数据（内容）和表现分离
4.优先级
CSS：Cascding Style Sheet---级联（层叠）样式表
继承+并集+优先级
内联>内部 或者 外部
内部和外部：优先级相同，就近原则，以最后一次定义的为最优
/*此文件中只能制定CSS代码*/
h2
{
border:1px solid black;
color:red;
}
div
{
color:green;
border:1px solid orange;
}
/*重新定义一份*/<html>
<head>
<title>CSS</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
/*CSS样式*/
h1
{
color:green;backgrond-color;#ccc;
}
div{color:blue;border:1px solid black;}
</style>
<link href="MyStyle.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div style="color:red; font-size:20pt;">test 优先级</div>
<h1>h1 text</h1>
<h2>h2 text:使用css文件中的样式</h2>
<p style="color:red;border:1px solid blue;">p text</p>
<p>第二个段落</p>
</body>
</html>二.CSS中的选择器的声明
1.元素选择器：
以html元素的名称--一类元素
2.类选择器：
自定义的某种选择器.name{样式声明}
html文件中，元素class属性<p class="name"></p>---不同的元素样式相同--跨元素
3.分类选择器：
元素.name{}---同一类元素下的细分
4.元素ID选择器：
以某个元素的id的值作为选择器 #idvalue{}
5.派生选择器：
依靠元素的层次关系，常用于实现某个大元素里某类元素的定义
div span{color:red;}
6.选择器分组：
对某些选择器定义一些统一的设置（相同）
h1,p,div{border:1px solid black;}
7.伪类选择器：
有些元素有不同的状态，典型的是a元素，常用的状态有：
focus 获得焦点
link 未访问过的链接
active 激活
hover 悬停，鼠标移入
visited 访问过的
/*此文件中只能制定CSS代码*/
h2
{
border:1px solid black;
color:red;
}
div
{
color:green;
border:1px solid orange;
}
/*重新定义一份*/
/*选择器*/
.s1{color:blue;font-size:25pt;}
/*分类选择器:更精确*/
input.btn{width:40px;color:red;}
input.txt{width:100px;color:blue;}
/*元素ID选择器：页面上只能某个元素用*/
#pageTitle{font-size:40pt;}
/*派生选择器*/
div span{color:orange;}
/*伪类选择器*/
a:link{color:orange;}
a:hover{font-size:20pt;}<html>
<head>
<title>CSS</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
/*CSS样式*/
h1
{
color:green;backgrond-color;#ccc;
}
div{color:blue;border:1px solid black;}
</style>
<link href="MyStyle.css" type="text/css" rel="stylesheet" />
</head>
<body>
<a href="#">超级链接</a>
<br />
<span class="input.btn">测试分类选择器</span>
<br />
<span id="pageTitle">测试ID选择器</span>
<form>
<input class="txt" type="text" value="mary" />
<br />
<input class="btn" type="button" value="按钮" />
</form>
<h3 class="s1">h3 text</h3>
<a href="#" class="s1">click me</a>
<div style="color:red; font-size:20pt;">test 优先级</div>
<h1>h1 text</h1>
<h2>h2 text:使用css文件中的样式</h2>
<p style="color:red;border:1px solid blue;">p text</p>
<p>第二个段落</p>
</body>
</html>三.各种样式声明
1.尺寸相关
width
height
overflow:内容溢出时如何处理
visible/hidden/scroll(总是显示滚动条)/auto（溢出时才会显示滚动条）
2.框模型（box model):
元素边框，内容，其他元素之间的内边距和外边距的问题
padding:内边距
margin:外边距
多种写法：
padding:30px;
padding-left/top/right/bottom:;
padding:10px 20px;上下 左右
padding：10px 20px 30px 40px;顺时针--上 右 下 左
特殊写法：margin而言---某个框剧中显示margin:0px auto;---居中
3.背景的设置
background-color:颜色；
background-image:url(a.jpg);
background-repeat:repeat/no-repeat/repeat-x/repeat-y;
background-position:left top;
background-attachment:scroll/fixed;
scroll:背景和内容一起滚动
fixed:背景固定，类似于水印得效果
4.文本样式
text-indent:; --首行缩进，常用于段落
font-weight:bold; --加粗显示
text-decoration:none/underline; --下划线
line-height: --行高，常用于控制文本得垂直高度
font-family:宋体；--字型
color:; --颜色
font-size:; --字体得大小
text-align:; --水平方向的对齐
5.表格样式：
表格特有的
border-collapse:collapse;--单元格边框的
vertical-align:;--单元格中垂直方向上的
6.浮动:
让元素脱离原有的流布局模式，浮动，停靠
float:left/right;
某个元素浮动，可能会影响后续的元素--后取消某侧浮动元素所带来的影响
clear:left/right/both;
7.display
---设置元素的显示方式
html元素行内元素和块级元素
行内元素：位于一行中，高和宽--自适应
块级元素：独占一行，自定义高和宽
有些时候，希望改变元素的显示方式
display:inline/block/none;常会结合js实现一些动态的效果
body{padding:0px;margin:0px;border:0;
background-image:url(a.jpg);
background-repeat:repeat-x;
}
/*所有的div的统一样式*/
div
{
border:1px solid black;
margin:0px auto;
}
/*header*/
#header,#footer{width:960px;}
#header
{
height:61px;
background-image:url(a.jpg);
background-repeat:no-repeat;
}
#navi
{
width:100%
height:91px;
background-image:url(a.jpg);
background-repeat:repeat-x;
}
#main
{
width:950px;
height:410px;
border:5px solid #8ac1db;
background-color:#e8f3f8;
}
#operater{},#data,#pages{width:910px;}
#operater{height:30px;}
#data{height:340px;}
#pages{height:28px;}
#footer{height:50px;}
/*header里的链接*/
#header{text-align:right;}
#header a{
color:white;
text-decoration:none;
line-height:61px;
margin-right:20px;
}
#header a:hover{
font-weight:bold;
text-decoration:underline;
}
#footer p{
color:white;
text-align:center;
margin:0px auto;
font-size:10pt;
line-height:25px;
}
/*数据表格的样式*/
#dataList{
width:910px;
border:1px solid black;
border-collapse:collapse
}
#dataList td{
height:30px;
border:1px solid black;
}
tr {background-color:white;}
/*第一行 ！important*/
tr.header{
height:40px;
background-color:#fbedce;
font-weight:bold;
}
tr:hover{
background-color:#f7f9fd;
}
/*修改，删除按钮*/
input.btnModi,input.btnDelete{
background-color:white;
border:0;
background-repeat:no-repeat;
width:45px;
padding-left:15px;
}
input.btnModi{
background-image:url(a.jpg);
}
input.btnDelete{
background-image:url(a.jpg);
}
/*header里的logo图形*/
#header img{float:left;}
/*导航菜单*/
#menu{
width:960px;
margin:5px auto;
padding:5px;
list-style-type:none;
}
#menu li{
float:left;
padding:0px 14px;
}
#menu a{
width:68px;
height:77px;
display:block;
}
a.index{background-image:url(a.jpg);}
a.role{background-image:url(b.jpg);}
a.admin{background-image:url(a.jpg);}<html>
<head>
<title>project</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<link href="admi.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--header页头部分-->
<div id="header">
<a href="https://blog.csdn.net/qq_38826019">[退出]</a>
</div>
<!--导航部分-->
<div id="navi">
<ul id="menu">
<li><a href="#" class="index"></a></li>
<li><a href="#" class="role"></a></li>
<li><a href="#" class="admin"></a></li>
</ul>
</div>
<!--主体部分-->
<div id="main">
<!--操作按钮部分-->
<div id="operater"></div>
<!--表格部分-->
<div id="data">
<!--1.定义表格（各选择器）2.表格的样式（宽度，边框）3.单元格的样式（高度，边框）4.第一行 5.其他行-->
<form>
<table id="dataList">
<tr class="header">
<td>
<input type="checkbox" />
</td>
<td>管理员ID</td>
<td>姓名</td>
<td>角色</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1</td>
<td>mary</td>
<td>角色1</td>
<td>
<input class="btnModi" type="submit" value="修改" />
<input class="btnDelete" type="submit" value="删除" />
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>2</td>
<td>mary2</td>
<td>角色2</td>
<td>
<input class="btnModi" type="submit" value="修改" />
<input class="btnDelete" type="submit" value="删除" />
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>3</td>
<td>mary3</td>
<td>角色3</td>
<td>
<input class="btnModi" type="submit" value="修改" />
<input class="btnDelete" type="submit" value="删除" />
</td>
</tr>
</table>
</form>
</div>
<!--分页部分-->
<div id="pages"></div>
</div>
<!--页脚部分-->
<div id="footer">
<p>公司版权</p>
<p>版权问题</p>
</div>
</body>
</html>