CSS
CSS和HTML分开的优点
HTML负责基本的内容展示,而CSS负责样式的控制,制造效果。
1、实现解耦合的作用
2、使得协作更加明确
3、开发效率得到提高
CSS和HTML的结合方式
内联:就是在想要控制样式的的标签内直接控制,只能作用于该部分,范围最小。
内部:直接在head内部中控制该文件的样式。
外部:通过link标签链接一个外部的css文件,而控制方式就直接书写在这个外部css文件中。
CSS的基本语法
格式:
选择器{
属性:属性值;
属性:属性值;
}
选择器:就是用于筛选特征相似的元素
基础选择器:
id选择器:#id属性值{}
优先级很高,只能渲染一次
元素选择器:直接筛选元素相对应的内容
类选择器:class属性值{}
优先级中等,可以渲染多次
优先性上id>calss>元素
扩展选择器:
通用选择器:*{}选择所有元素
并集选择器:选择器1,选择器2{}
子集选择器:选择器1 选择器2{}
父集选择器:选择器1>选择器2(选择选择器2上的选择器1)
属性选择器:元素名称[属性=“属性值”]{}
伪类选择器:元素:状态{}
- 链接伪类选择器
一 链接伪类选择器注意事项.
二 链接伪类选择器实际开发中的写法.
链接伪类选择器注意事项
- 为了确保生效,请按照 LVHA 的循顺序声明 :link-:visited-:hover-:active。
- 记忆法:love hate 或者 lv 包包 hao 。
- 因为 a 链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式。
/* a 是标签选择器 所有的链接 */
a {
color: gray;
}
/* :hover 是链接伪类选择器 鼠标经过 */
a:hover {
color: red; /* 鼠标经过的时候,由原来的 灰色 变成了红色 */
}
- :focus 伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标,一般情况 类表单元素才能获取,因此这个选择器也主要针对于表单元素来说
input:focus {
background-color:yellow;
}
状态:linked:初始化
hover:鼠标悬浮状态
active:鼠标点击但是未打开状态
visited:访问过状态
CSS属性
字体(Font)属性
font-size:字体大小
font-family:字体系列
font-weight:字体粗细,400代表去除加粗
font-style:代表是否斜体,normal/italic
字体复合属性
body {
font: font-style font-weight font-size/line-height font-family; }
使用 font 属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开
不需要设置的属性可以省略(取默认值),但必须保留 font-size 和 font-family 属性,否则 font 属性将不起作用
文本(Text) 属性
color:文本的颜色
text-align:对其方式
line-height:行高
text-decoration:是否有下划线
text-indent:文本缩进(2em即两个字体单位)
边框(Border)属性
border:设置边框,复合属性
尺寸(Dimension) 属性
width:设置宽度
height:设置高度
背景(background)属性
background:设置背景,复合属性
background-color:颜色值;
background-color:transparent;
background-image
属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置.
background-image : none | url (url)
background-repeat:背景平铺
background-repeat: repeat | no-repeat | repeat-x | repeat-y
background-position:背景位置
background-position: x y;
- 参数是方位名词
如果指定的两个值都是方位名词,则两个值前后顺序无关,比如 left top 和 top left 效果一致
如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐 - 参数是精确单位
如果参数值是精确坐标,那么第一个肯定是 x 坐标,第二个一定是 y 坐标
如果只指定一个数值,那该数值一定是 x 坐标,另一个默认垂直居中 - 参数是混合单位
如果指定的两个值是精确单位和方位名词混合使用,则第一个值是 x 坐标,第二个值是 y 坐标
background-attachment:背景固定
background-attachment : scroll | fixed
背景复合写法
为了简化背景属性的代码,我们可以将这些属性合并简写在同一个属性 background 中。从而节约代码量. 当使用简写属性时,没有特定的书写顺序,一般习惯约定顺序为:
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
background: transparent url(image.jpg) repeat-y fixed top ;
CSS 的元素显示模式
- 块元素
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,
其中 <div> 标签是最典型的块元素。
块级元素的特点:
① 比较霸道,自己独占一行。
② 高度,宽度、外边距以及内边距都可以控制。
③ 宽度默认是容器(父级宽度)的100%。
④ 是一个容器及盒子,里面可以放行内或者块级元素。
注意:
文字类的元素内不能使用块级元素
<p> 标签主要用于存放文字,因此 <p> 里面不能放块级元素,特别是不能放<div>
同理, <h1>~<h6>等都是文字类块级标签,里面也不能放其他块级元素
- 行内元素
常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、
<span>等,其中<span> 标签是最典型的行内元素。
有的地方也将行内元素称为内联元素。
行内元素的特点:
① 相邻行内元素在一行上,一行可以显示多个。
② 高、宽直接设置是无效的。
③ 默认宽度就是它本身内容的宽度。
④ 行内元素只能容纳文本或其他行内元素。
注意:
链接里面不能再放链接
特殊情况链接 <a>
里面可以放块级元素,但是给 <a>
转换一下块级模式最安全
- 行内块元素
在行内元素中有几个特殊的标签 —— <img />、<input />、<td>,
它们同时具有块元素和行内元素的特点。
有些资料称它们为行内块元素。
行内块元素的特点:
① 和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)。
② 默认宽度就是它本身内容的宽度(行内元素特点)。
③ 高度,行高、外边距以及内边距都可以控制(块级元素特点)。
- 元素显示模式转换
转换为块元素:display:block;
转换为行内元素:display:inline;
转换为行内块:display: inline-block;
Chrome浏览器调试
登录案例
HTML展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<link rel="stylesheet" href="css/注册页面样式表.css">
</head>
<body>
<div class="rg_layout">
<!--左侧注册提示-->
<div class="rg_left">
<p class="rg_left_chinese">新用户注册</p>
<p class="rg_left_english">USER REGISTER</p>
</div>
<!--中间填写注册信息-->
<div class="rg_center">
<div>
<form>
<table>
<tr>
<td class="td_left"><label for="username">用户名</label></td>
<td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
</tr>
<tr>
<td class="td_left"><label for="password">密码</label></td>
<td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码">
</td>
</tr>
<tr>
<td class="td_left"><label for="email">Email</label></td>
<td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
</tr>
<tr>
<td class="td_left"><label for="name">姓名</label></td>
<td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
</tr>
<tr>
<td class="td_left"><label for="phone">手机号</label></td>
<td class="td_right"><input type="text" name="phone" id="phone" placeholder="请输入手机号"></td>
</tr>
<tr>
<td class="td_left">性别</td>
<td class="td_right">
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
</td>
</tr>
<tr>
<td class="td_left">出生日期</td>
<td class="td_right">
<input type="date" name="birthday" id="birthday">
</td>
</tr>
<tr>
<td class="td_left"><label for="checkcode">验证码</label></td>
<td class="td_right">
<input type="text" name="checkcode" id="checkcode">
<img id="img_check" src="img/verify_code.jpg"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input id="btn_sub" type="submit" value="注册">
</td>
</tr>
</table>
</form>
</div>
</div>
<!--右侧登陆提示-->
<div class="rg_right">
<p class="rg_right_login">已有账号?<a href="#">立即登陆</a></p>
</div>
</div>
</body>
</html>
CSS展示
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
background: url("../img/register_bg.png") no-repeat center;
}
.rg_layout{
width: 900px;
height: 500px;
border: 8px solid #EEEEEE;
background-color: white;
/*让div水平居中*/
margin: auto;
margin-top: 25px;
}
.rg_left{
/*border: 1px solid red;*/
float: left;
margin: 15px;
}
.rg_left_chinese{
color:#FFD026;
font-size: 20px;
}
.rg_left_english{
color:#A6A6A6;
font-size: 20px;
}
.rg_center{
/*border: 1px solid red;*/
float: left;
margin: 15px;
}
.td_left{
width: 100px;
text-align: right;
height: 45px;
}
.td_right{
padding-left: 50px ;
}
#username,#password,#email,#name,#phone,#birthday,#checkcode{
width: 251px;
height: 32px;
border: 1px solid #A6A6A6 ;
/*设置边框圆角*/
border-radius: 5px;
padding-left: 10px;
}
#checkcode{
width: 110px;
}
#img_check{
height: 32px;
/*设置垂直居中*/
vertical-align: middle;
}
#btn_sub{
width: 150px;
height: 40px;
margin-top: 15px;
margin-left: 50px;
background-color: #FFD026;
border: 1px solid #FFD026 ;
}
.rg_right{
/*border: 1px solid red;*/
float: right;
margin: 15px;
}
.rg_right_login{
font-size: 15px;
}
.rg_right_login a{
color: pink;
}