元素按显示方式分为哪几种 , 并举例 , 正确描述它们.
1.隐 藏: div , p , h , ul...
独占一行 可以设置有效宽高 , 当发生嵌套,子元素没有设置宽高 , 子等于父宽
2.块级元素: div , p , h , ul...
独占一行 可以设置有效宽高 , 当发生嵌套,子元素没有设置宽高 , 子等于父宽
3.行内元素: span , em , a , strong...
多个元素在一行内显示 , 无法设置有效宽高,宽度由容器的内容决定
4.行内块元素:input, img...
多个行内块元素在一行上显示 , 可以设置有效宽高
css是什么? 它的作用是什么?
css 是层叠样式表 , 用来设置 HTML元素在文档中的布局和显示方式
什么是css选择器 , 它的样式声明是哪两部分组成?
css选择器是一种模式 , 用于选择需要添加样式的元素 , 用来确定HTML的树形结构中的
DOM(文档对象模型)元素节点
样式声明: 选择器 {(样式规则=属性:属性值;) } 两部分组成
css简单选择器 实例
选择器优先级:id>class>元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css简单选择器 有五种</title>
<style>
/*1.元素选择器*/
p{
color:#ff0000;
}
/*2.属性选择器*/
p[class]{
color:#ffffff;
}
.blue{
background-color: #0000ff;
}
/*3.ID选择器*/
#yellow{
color:#ffff00;
}
/*4.群级选项器*/
.gray , h3{
background-color:#808080;
}
/*5.通配符选择器*/
body * {
font-size: 2rem;
/*将body里字体放大两倍*/
}
</style>
</head>
<body>
<p>今天是2019年10月31日</p>
<p class="blue">天气晴朗 阳光很暖</p>
<p id="yellow">开始崭新的一天</p>
<p class="gray">继续完成复习与作业</p>
<h3>加油吧 多看多敲</h3>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
css上下文选择器 实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css上下文选择器</title>
<style>
/*1.后代选择器*/
div p{
color:#ff0000;
}
/*2.父子选择器*/
div > h5{
background-color:#808080;
}
/*3.同级相邻选择器*/
#peer + *{
color:#0000ff;
}
/*4.同级所有选择器*/
#peer ~ *{
background-color:#ffff00;
}
</style>
</head>
<body>
<div>
<h5>
<p>今天是2019年10月31日</p>
<p>天气晴朗 阳光很暖</p>
</h5>
</div>
<p id="peer">开始崭新的一天</p>
<p>继续完成复习与作业</p>
<h3>加油吧 多看多敲</h3>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
css结构伪类限制器 实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css结构伪类选择器</title>
<style>
/*非限定类型 关注子位置 忽略子类型(可以指定)*/
h2 > :nth-child(2){
background-color:#ffff00;
}
h2 > :first-child{
color:#ffff00;
}
/*限定类型 关注子位置与类型(也可忽略)*/
h3 > :nth-last-of-type(1){
background-color:#ff0000;
}
h4 > :nth-of-type(2){
background-color:#0000ff;
}
</style>
</head>
<body>
<ul>
<h2>
<li>耐克</li>
<li>阿迪</li>
<li>彪马</li>
</h2>
</ul>
<ul>
<h3>
<li>美国</li>
<li>德国</li>
<li>德国</li>
</h3>
</ul>
<ul>
<h4>
<li>成立于1972</li>
<li>成立于1949</li>
<li>成立于1948</li>
</h4>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
css表单伪类选择器 实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css表单伪类选择器</title>
<style>
/*选择启用每个input元素*/
input:enabled{
background-color:#808080;
}
/*选择禁用每个input元素*/
input:disabled{
background-color:#0000ff;
}
/*选择每个被选中的input元素*/
input:checked{
background-color:#ff0000;
}
</style>
</head>
<body>
<form action="" method="post">
<label for="username">账号:</label>
<input type="text" name="username" id="username" value="">
<hr>
<label for="password">密码:</label>
<input type="password" name="password" id="password" value="">
<hr>
<label for="email">邮箱:</label>
<input type="email" name="email" id="email" value="">
<hr>
<button>提交</button>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手写笔记
