1.1 选择器
选择器:指定某段CSS代码做用在哪些标签上css
1.2 元素选择器
元素选择器：指定某段CSS代码做用在 哪些指定名称的标签上。html
格式：布局
元素名{测试
CSS代码字体
}编码
<style>
span{
color:red;
}
</style>
</head>
<body>
<span>111111-红色</span>
<span>222222-红色</span>
<div>333333</div>
<font>44444</font>
</body>url
适用于：相同的CSS样式，做用在某一种标签上。spa
1.3 类选择器
全部的HTML标签,都有一个class属性htm
<标签名 class=”类名”>对象
类选择器：指定某段CSS代码 做用在 指定类名的标签上
格式：
.类名{
CSS代码
}
<style>
.redF{
color:red;
}
</style>
</head>
<body>
<span>span1：我是黑色</span>
<span class="redF">span2：我是红色</span>
<div>div：我是黑色</div>
<div class="redF">div2：我是红色</div>
</body>
适用于：不一样标签做用相一样式
1.4 ID选择器
全部标签都有id属性
<标签名 id=”编号”>
尽可能保证：id在当前页面是不重复、惟一
ID选择器：指定某段CSS代码 做用于 某个指定ID的标签上。
格式：
#ID值{
Css代码
}
<style>
#d1{
color:red;
}
#d2{
color:blue;
}
</style>
</head>
<body>
<span>span1：我是黑色</span>
<span>span2：我是黑色</span>
<div>div1：我是黑色</div>
<div id="d1">div2：我是红色</div>
<div id="d2">div3：我是蓝色</div>
</body>
适用于：将某同样式 针对性地做用于 某一标签上。
1.5 扩展：属性选择器
- 格式：
标签名[属性名=’属性值’]{
/*css样式代码*/
}
<style> font[size='7']{ color:red; } </style> </head> <body> <font size="3">黑色字体1111</font> <font size="5">黑色字体2222</font> <font size="7">红色字体</font> </body>
1.6 扩展：包含选择器
- 格式：
选择器1 选择器2 …..{
/*css样式代码*/
}
意思为：搜索选择器1 下的全部的 选择器2
<style> div font{ color:red; } </style> </head> <body> <div> <span> <font>变为红色字体111</font> </span> <font>变为红色字体222</font> 黑色字体111 </div> <font>黑色字体222</font> </body>
1.7 扩展：子对象选择器
- 格式：
选择器1>选择器2 …..{
/*css样式代码*/
}
意思为：搜索选择器1 下的全部的子标签 选择器2
<style> div>font{ color:red; } </style> </head> <body> <div> <span> <font>黑色字体111</font> </span> <font>变为红色字体111</font> 黑色字体222 </div> <font>黑色字体333</font> </body>
2.1 CSS样式
2.2.1 边框属性
- border:边框
- width:宽度
- height:高度
- background-color:背景颜色
<style>
#dd{
/*
border:边框粗细 边框线类型 边框线颜色
*/
border:1px solid blue;
/*
宽度、高度 ： px 百分比
*/
width:300px;
height: 300px;
/*
颜色：颜色单词
颜色编码
*/
background-color: bisque;
}
#dl{
width:300px;
height: 300px;
background-image: url("../img/xxx.png");
}
</style>
</head>
<body>
<div id="dd">今天周六了,你要出去走走吗?</div>
<div id="dl">今天周六了,你要出去走走吗?</div>
</body>
2.2.2布局
- 格式
选择器{float:属性值;}
经常使用属性值：
- none：元素不浮动（默认值）
- left：元素向左浮动
- right：元素向右浮动
- 格式：选择器{
- clear:属性值;
}
经常使用属性值：
- left：不容许该元素左侧有浮动元素（清除左侧浮动的影响）
- right：不容许该元素右侧有浮动元素（清除右侧浮动的影响）
- both：同时清除左右两侧浮动的影响（通常用both）
<style> #d1{ background-color: red; width: 100px; height: 100px; float: left; } #d2{ background-color: green; width: 110px; height: 110px; float: left; /*clear:both;*/ } #d3{ background-color: blue; width: 120px; height: 120px; float: left; } </style> </head> <body> <div id="d1"></div> <div id="d2"></div> <div id="d3"></div> </body>
2.2.3转换
- 块元素：会自动换行
- 行内元素：不会自动换行
- 经常使用的属性值：
- block：此元素将显为块元素（块元素默认的display属性值）
- inline：此元素将显示为行内元素（行内元素默认的display属性值）
- none：此元素将被隐藏，不显示，也不占用页面空间。
2.2.4 字体
<style> span{ font-size:120px; color:red; } </style> </head> <body> <span>xxxxx</span> </body>
2.3 CSS盒子模型【重点】
2.3.1 边框（border）
<style> div{ width: 300px; height: 300px; border-top:3px double blue; border-right:3px double red; border-bottom:3px double yellow; border-left:3px double green; /* 一次性设置四个边框 border:3px double green; */ } </style> </head> <body> <div></div> </body>
2.3.2 内边距(padding)
内边距: HTML 元素里的内容体 到 HTML 元素边框 的距离
<style> div{ width: 300px; height: 300px; border:3px solid red; padding-top: 50px; padding-left: 50px; } </style> </head> <body> <div>这是个人测试内容</div> </body>
2.3.3 外边距
<style> div{ width: 300px; height: 300px; border:3px solid red; margin-top: 100px; margin-left: 100px; } </style> </head> <body> <div></div> </body>
2.4 引入CSS样式
2.4.1 内部样式（写在某个HTML页面上）
修改某一个标签的样式：
<html标签 style=”css样式代码” />
修改某个页面上的标签样式
格式:
<style>
css样式代码
</style>
2.4.2 外部样式
1、建立css文件 （.css）
2、为HTML引入css文件
格式：
<link rel="stylesheet" type="text/css" href="css文件路径"/>
- rel="stylesheet" ,固定值，表示样式表
- type="text/css"，固定值，表示css类型
- href ，表示css文件位置
<head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="demo.css"/> </head>