Css基础知识
css的编写位置
内部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
p {
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<p>hello world</p>
</body>
</html>
外部样式
创建out.css文件
p {
color: green;
font-size: 20px;
}
创建html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 外部样式添加 link 引用 -->
<link rel="stylesheet" href="out.css">
</head>
<body>
<p>hello world</p>
</body>
</html>
内联样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p style="color:red;">hello world</p>
</body>
</html>
选择器
并集选择器
<p>hello world</p>
<div id="d1"> div text 01</div>
<div class="d2"> div text 02</p>
<style type="text/css">
p , #d1 , .d2{
background-color: magenta;
}
</style>
后代元素选择器
<style type="text/css">
#d1 span {
color: greenyellow;
}
</style>
<div id="d1">
<p>Helloween</p>
<span>this is a span</span>
<div id="d2">
<span>this is a span 2</span>
</div>
</div>
交集选择器
<style type="text/css">
span.p3 {
background-color: yellow;
}
</style>
<span>this is span 1</span>
<span class="p3">this is span 2</span>
类选择器
.c1{
background-color: hotpink;
height: 10px;
width: 10px;
}
<div class="c1"></div>
属性选择器
- 作用:可以根据元素中的属性或属性值来选取指定元素
- 语法:
- [属性名] 选取含有指定属性的元素
- [属性名=“属性值”] 选取含有指定属性值得元素
- [属性名^=“属性值”] 选取属性值以及指定内容开头的元素
- [属性名$=“属性值”] 选取属性值以及指定内容结尾的元素
- [属性名*=“属性值”] 选取属性值以及包含指定内容的元素
<style type="text/css">
/* 所有有title 属性的 p 标签都 变色 */
p[title] {
background-color: yellow;
}
/* title属性值为hello 的变成 teal 颜色 */
p[title="hello"] {
background-color: teal;
}
/* 为title属性值以ab开头的元素设置一个背景颜色为黄色 */
p[title^="ab"] {
background-color: tomato;
}
/* 已c结尾的 */
p[title$="c"] {
background-color: navy;
}
/* 包含c的 */
p[title*="c"] {
background-color:lime;
}
</style>
<!--title属性，这个属性可以给任何标签指定
当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字显示-->
<p title="hello">我是一个段落</p>
<p>我是一个段落</p>
<p title="hello">我是一个段落</p>
<p title="abbc">我是一个段落</p>
<p title="abccd">我是一个段落</p>
<p title="abc">我是一个段落</p>
通配符选择器
<style type="text/css">
*{
background-color:lightskyblue;
}
</style>
<div></div>
兄弟元素选择器
<style type="text/css">
/* A + B 选择A后面一个兄弟元素B */
/* span + p{
background-color: yellow;
} */
/* A ~ B 选择A后面所有兄弟元素B */
span ~ p{
background-color: yellow;
}
</style>
<body>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<span>我是一个span</span>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
</body>
元素选择器
<style type="text/css">
div{
background-color: red;
width: 100%;
height: 10px;
}
</style>
<div></div>
子元素选择器
子元素和 后代元素的区别在于
- 后代元素中所有的 span都产生了变化
- 子元素中 只有子元素产生变化, 孙子元素 曾孙子元素都没有变化
<style type="text/css">
#d1>span {
color: greenyellow;
}
</style>
<div id="d1">
<p>Helloween</p>
<span>this is a span</span>
<div id="d2">
<span>this is a span 2</span>
</div>
</div>
id选择器
<style type="text/css">
#d1{
background-color: green;
height: 10px;
width: 20%;
}
</style>
<div id="d1"></div>
伪类和伪元素
伪类
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* 伪类和伪元素用来表示元素所处的一个特殊的状态，或者是一个特殊的位置 */
/* 表示一个普通的链接 */
a:link {
color: brown;
}
/* 访问过的链接的状态 */
a:visited{
color: chartreuse;
}
/* 鼠标移入的状态 */
a:hover{
color:magenta;
}
/* 被点击时的状态 */
a:active{
color: yellow;
}
/* 文本框获取焦点后,修改输入框为 teal颜色 */
input:focus{
background-color: teal;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">链接1</a>
<a href="http://www.baidu123456.com">没访问过的链接</a>
<p>我是一个段落</p>
<input type="text" />
</body>
</html>
伪元素
使用伪元素来表示元素中的一些特殊的位置
:first-letter:表示第一个字符:first-line:表示文字的第一行:before:选中元素的最前边,一般该伪类都会结合content一起使用,通过content可以向指定位置添加内容:after:选中元素的最后面,一般该伪类都会结合content一起使用,可以通过content向指定位置添加内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* 为p中第一个字符设置一个样式 */
p::first-letter {
color: red;
font-size: 20px;
}
/* 为p中的第一行设置一个背景颜色为黄色 */
p::first-line {
background-color: yellow;
}
/* 在选中元素的前面添加内容 */
p::before {
content: "我会出现在整个段落的最前边";
color: pink;
}
/* 在选中元素的后面添加内容 */
p:after {
content: "我会出现在整个段落的最后边";
color: orange;
}
</style>
</head>
<body>
<p>
在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。
</p>
</body>
</html>
否定伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*
* 为所有的p元素设置一个背景颜色为黄色，除了class值为hello的
*/
p:not(.hello) {
background-color: yellow;
}
</style>
</head>
<body>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p class="hello">我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
</body>
</html>
子元素的伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*
直接写成 p:first-child 也是可以的
如果第一个元素 不是 p ,那么样式不会生效
*/
body>p:first-child {
background-color: red;
}
/* 同理如果 p不是最后一个元素 那么不会生效 */
p:last-child {
background-color: rosybrown;
}
/*
* :nth-child 可以选中任意位置的子元素
* 该选择器后边可以指定一个参数，指定要选中第几个子元素
* even 表示偶数位置的子元素
* odd 表示奇数位置的子元素
*/
p:nth-child(odd) {
background-color: yellow;
}
/*
* :first-of-type
* :last-of-type
* :nth-of-type
* 和:first-child这些非常的类似，
* 只不过child，是在所有的子元素中排列
* 而type，是在当前类型的子元素中排列
*/
p:first-of-type {
background-color: yellow;
}
p:last-of-type {
background-color: yellow;
}
</style>
</head>
<body>
<!-- <span>我是span</span> -->
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<!-- <span>hello</span> -->
</body>
</html>
表单和表单内容
表单
form:使用form标签来创建一个表单
- form标签中必须指定一个action属性,该属性指向的是一个服务器地址,当我们提交表单的时候会提交到action属性对应的地址
- 使用form创建的仅仅是一个空白的表单,我们还需要向form中添加不同的表单项
- 在表单中可以使用fieldset来为表单项进行分组,可以将表单项中的同一组放到一个fieldset中
- 在fieldset可以使用legend子标签，来指定组名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="target.html">
<fieldset>
<!-- 在fieldset可以使用legend子标签，来指定组名 -->
<legend>用户信息</legend>
<label for="um">用户名</label>
<input id="um" type="text" name="username" /> <br /><br />
<label for="pwd">密码 </label>
<input id="pwd" type="password" name="password" /> <br /><br />
</fieldset>
</form>
</body>
</html>
表单内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="target.html">
<fieldset>
<!-- 在fieldset可以使用legend子标签，来指定组名 -->
<legend>用户信息</legend>
<label for="um">用户名</label>
<!--
type : 输入框的类型 ,text为文本框, password为密码框
name: 和向后台传递的属性名一致
machoul: 默认值(会直接在文本框中显示)
-->
<input id="um" type="text" name="username" value="machoul" />
<label for="pwd">密码 </label>
<input id="pwd" type="password" name="password" />
<br />
<!--
type:radio 单选框
两个name的值应保持一致
check: 默认选中的值
-->
性别 <input type="radio" name="gender" value="male" id="male" />
<label for="male">男</label>
<input type="radio" name="gender" value="female" checked="checked" id="female" />
<label for="female">女</label>
<br>
<!--
type: checkbox 多选框
同理, 同一个多选下, name应该保持一致
checked:默认选中的值
-->
爱好
<input type="checkbox" name="hobby" value="zq" />足球
<input type="checkbox" name="hobby" value="lq" />篮球
<input type="checkbox" name="hobby" value="ymq" checked="checked" />羽毛球
<input type="checkbox" name="hobby" value="ppq" checked="checked" />乒乓球
<br>
你喜欢的明星
<select name="star">
<optgroup label="女明星">
<option value="fbb">范冰冰</option>
<option value="lxr">林心如</option>
<option value="zw">赵薇</option>
</optgroup>
<optgroup label="男明星">
<option value="zbs" selected="selected">赵本山</option>
<option value="ldh">刘德华</option>
<option value="pcj">潘长江</option>
</optgroup>
</select>
<br>
自我介绍 <textarea name="info"></textarea>
<br>
<input type="submit" value="注册" />
<input type="reset" value="重置" />
<button type="button">普通按钮</button>
</fieldset>
</form>
</body>
</html>
表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table border="1" width="40%" align="center">
<!--
在table标签中使用tr来表示表格中的一行，有几行就有几个tr
-->
<tr>
<!-- 在tr中需要使用td来创建一个单元格，有几个单元格就有几个td -->
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<!--
rowspan用来设置纵向的合并单元格
-->
<td rowspan="2">B4</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<!--
colspan横向的合并单元格
-->
<td colspan="2">D3</td>
</tr>
</table>
</body>
</html>
表格的属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
table {
width: 300px;
/*居中*/
margin: 0 auto;
/*边框*/
border: 1px solid black;
/* table和td边框之间默认有一个距离 通过border-spacing属性可以设置这个距离 */
border-spacing: 1px;
/* border-collapse可以用来设置表格的边框合并 如果设置了边框合并，则border-spacing自动失效 */
border-collapse: collapse;
/*设置背景样式*/
/* background-color: #bfa; */
}
/*
* 设置边框
*/
td,
th {
border: 1px solid black;
}
/* 设置隔行变色 */
/* 对tr 进行 修改的 */
tr:nth-child(even) {
background-color: #bfa;
}
/* 鼠标移入时变色 */
tr:hover {
background-color: #ff0;
}
</style>
</head>
<body>
<table>
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<td>B4</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<td>D3</td>
</tr>
</table>
</body>
</html>
长表格
有一些情况下表格是非常的长的，这时就需要将表格分为三个部分，表头，表格的主体，表格底部
在HTML中为我们提供了三个标签：
- thead 表头
- tbody 表格主体
- tfoot 表格底部
这三个标签的作用，就来区分表格的不同的部分，他们都是table的子标签,都需要直接写到table中，tr需要写在这些标签当中thead中的内容，永远会显示在表格的头部， tfoot中的内容，永远都会显示表格的底部， tbody中的内容，永远都会显示表格的中间
如果表格中没有写tbody，浏览器会自动在表格中添加tbody,并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素,通过table > tr 无法选中行 需要通过tbody > tr
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<thead>
<td>title1</td>
<td>title2</td>
<td>title3</td>
<td>title4</td>
</thead>
<tbody>
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<td>B4</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<td>D3</td>
<td>D4</td>
</tr>
</tbody>
<tfoot>
<td>end1</td>
<td>end2</td>
<td>end3</td>
<td>end4</td>
</tfoot>
</table>
</body>
</html>
背景
语法:使用background-image来设置背景图片
background-image:url(相对路径);- 如果背景图片大于元素，默认会显示图片的左上角
- 如果背景图片和元素一样大，则会将背景图片全部显示
- 如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
可以同时为一个元素指定背景颜色和背景图片,这样背景颜色将会作为背景图片的底色,一般情况下设置背景图片的时候同时会指定一个背景颜色
-
background-repeat用于设置背景图片的重复方式- repeat，默认值，背景图片会双方向重复（平铺）
- no-repeat，背景图片不会重复，有多大就显示多大
- repeat-x， 背景图片沿水平方向重复
- repeat-y，背景图片沿垂直方向重复
-
background-position可以调整背景图片在元素中的位置- 该属性可以使用
toprightleftbottomcenter中的两个值指定一个图片的位置,如果只给出一个值，则第二个值默认是center, 也可以直接指定两个位移量 - 第一个值是水平位移量
- 如果指定的是一个正值，则图片会向右移动指定的像素
- 如果指定的是一个负值，则图片会向左移动指定的像素
- 第二个值是垂直位移量
- 如果指定的是一个正值，则图片会向下移动指定的像素
- 如果指定的是一个负值，则图片会向上移动指定的像素
- 该属性可以使用
-
background-attachment用来设置背景图片是否随页面一起滚动- scroll，默认值，背景图片随着窗口滚动
- fixed，背景图片会固定在某一位置，不随页面滚动
- 不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素
- 当背景图片的background-attachment设置为fixed时,背景图片的定位永远相对于浏览器的窗口
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 1980px;
height: 1020px;
margin: 0 auto;
/*设置背景样式*/
background-color: #bfa;
background-image:url(img/2.jpg);
background-repeat: repeat-y;
/* background: #bfa url(img/3.png) center center no-repeat fixed; */
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
框架集
框架集和内联框架的作用类似，都是用于在一个页面中引入其他的外部的页面框架集可以同时引入多个页面，而内联框架只能引入一个，在h5标准中，推荐使用框架集，而不使用内联框架
使用frameset来创建一个框架集，注意frameset不能和body出现在同一个页面中,所以要使用框架集，页面中就不可以使用body标签，属性：
- rows，指定框架集中的所有的框架，一行一行的排列
- cols， 指定框架集中的所有的页面，一列一列的排列
这两个属性frameset必须选择一个，并且需要在属性中指定每一部分所占的大小，frameset中也可以再嵌套frameset frameset和iframe一样，它里边的内容都不会被搜索引擎所检索，所以如果搜索引擎检索到的页面是一个框架页的话，它是不能去判断里边的内容的
使用框架集则意味着页面中不能有自己的内容，只能引入其他的页面，而我们每单独加载一个页面,浏览器都需要重新发送一次请求，引入几个页面就需要发送几次请求，用户的体验比较差，如果非得用建议使用frameset而不使用iframe
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset cols="30% , * , 30%">
<frame src="aaa.html" />
<frame src="bbb.html" />
<!-- 嵌套一个frameset -->
<frameset rows="30%,50%,*">
<frame src="ccc.html" />
<frame src="ddd.html" />
<frame src="eee.html" />
</frameset>
</frameset>
</html>
扫一扫
6556
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
