一天搞定CSS基础(速成版)
2020-01-15 07:23
99 查看
目录
- 什么是CSS
- CSS与HTML之间的关系
- 使用CSS样式表的方式
- CSS语法
- CSS选择器
- 常用的属性
- 盒子模型(登录界面)
1.什么是CSS
1.概念:CSS(Cascading Style Sheets)层叠样式表,又叫级联样式表,简称样式表。
- 网页的美化和布局
- 层叠:多个样式可以作用在同一个html的元素上,同时生效
2.用于HTML文档中元素样式的定义
- 实现了将内容与表现的分离
- 提高代码的可重用性和可维护性
3.文件后缀是.css。
2.CSS与HTML之间的关系
- HTML用于构建网页的结构
- CSS用于构建HTML元素的样式
- HTML是页面的内容组成,CSS是页面的表现
- 结构层:HTML
- 表现层:CSS
- 行为层:JavaScript
3.使用CSS样式表的方式
- 内联方式:
在标签开始内使用style属性指定CSS代码(键值对构成)
<p style="color:red;">红色字体</p>
<div style="color:red;">Hello world</div>
- 内部样式表
直接把CSS代码添加到头部的style标签中
<head> <style> p{color:red;} </style> </head>
- 外部样式表、
-
定义CSS资源文件
- 在head标签内,定义link标签,引入外部的资源文件
<link rel="stylesheet" href="资源名.css" type="text/css"/>
外部定义index.css文件:
div{ font-size:20px; color:green; }
index.html文件:
<link rel="stylesheet" href="index.css"/> <div>hello web</div> <div>hello web</div>
StyleSheet的意思就是样式
- 导入式(不常用)
<head> <style> @import url(文件名.css) </style> </head>
4.CSS语法
- 格式:
选择器 { 属性名1:属性值1; 属性名2:属性值2; . . . }
- 选择器:筛选具有相似特征的元素
- 注意:每一对属性需要使用 ; 隔开,最后一对属性可以不加;
5.CSS选择器
选择器:筛选具有相似特征的元素
1、基本选择器
- id选择器:选择具体的ID属性值的元素,在一个HTML页面中id值唯一
* 语法:#id属性值{}
- 元素选择器:选择具有相同标签名称的元素
* 语法:标签名称{} * 注意:id选择器优先级高于元素选择器
- 类选择器:选择具有相同的class属性值的元素
* 语法:.class属性值{}
2、扩展选择器
- 选择所有元素:
* 语法:*{ }
- 并集选择器:
* 选择器1,选择器2{ }
- 子选择器:筛选选择器1元素下的选择器2元素
* 语法:选择器1 选择器2 { }
- 父选择器:筛选选择器2的父元素选择器1元素
* 语法:选择器1 > 选择器2{ }
- 属性选择器:选择元素名称, 属性名=属性值的元素
* 语法:元素名称[属性名="属性值"]{ }
- 伪类选择器:选择一些元素具有的状态
* 语法:元素: 状态{ } 如:a 标签的状态: * link:初始化的状态 * hover:鼠标悬浮状态 * active:正在访问的状态(按住鼠标时不松手) * visited:被访问过的状态
6.常用的属性
- 字体、文本
- font-size:字体大小 - color:文本颜色 - text-align:对齐方式 - line-height:行高
- 背景
- background:复合属性(颜色、图片、位置、是否重复) 比如:background: url("img/logo.jpg") no-repeat center;
- 边框
- border:设置边框,复合属性(1px solid red)
- 尺寸
- width:宽度 - height:高度
- 盒子模型:控制布局
- margin:外边距 - padding:内边距 * 内、外边距是一个相对的概念 * 默认情况下内边距会影响整个盒子的大小 * 设置盒子的属性,让width和height就是最终盒子的大小 box-sizing: border-box;
- float:left/right 浮动效果
7、盒子模型(登录界面)
效果图:
源代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>User Register</title> <style> * { margin: 0px; padding: 0px; /* 内边距默认会改变大小 */ box-sizing: border-box; } body{ background: url("bgimg.jpg") no-repeat; background-size: 100%; } .rg_layout{ width: 900px; height: 600px; border: 8px solid #eeeeee; background-color: white; /*让div水平居中*/ margin: auto; margin-top: 30px; } .rg_left{ /* border: 1px solid red; */ float: left; margin: 15px; } .rg_center{ /* border: 1px solid red; */ float: left; width:550px; } .rg_right{ /* border: 1px solid red; */ float: right; margin: 15px; } .rg_left > p:first-child{ color: #ffd026; size:20px; } .rg_left > p:last-child{ color: #a6a6a6; } .td_left{ width: 100px; text-align: right; height: 45px; } .td_right{ padding-left: 50px; } #username,#password,#Email,#name,#tel,#birthday,#checkcode{ width:251px; height: 32px; border:1px solid #a6a6a6; /*设置边框的圆角效果*/ border-radius: 5px; padding-left:10px; } #checkcode{ width: 100px; } .rg_right > p:first-child{ font-size: 15px; } .rg_right p a{ color: red; } #img_check{ height:32px; vertical-align: middle; } #bt_sunmit{ width:150px; height:40px; background-color: #ffd026; border:1px solid #ffd026; } </style> </head> <body> <div class="rg_layout"> <div class="rg_left"> <p>新用户注册</p> <p>USER REGISTER</p> </div> <div class="rg_center"> <div class="rg_form"> <form action="#"></form> <table> <tr> <td class="td_left"><label for="uesrname">用户名</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="text" 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="tel">手机号</label></td> <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td> </tr> <tr> <td class="td_left"><label>性别</label></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"><label for="birthday">出生日期</label></td> <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td> </tr> <tr> <td class="td_left"><label for="checkcode">验证码</label></td> <td class="td_right"><input type="text" name="checkcode" id="checkcode"> <img src="checkcode.png" id="img_check"> </td> </tr> <tr> <td colspan="2" align="center"><input type="submit" value="注册" id="bt_sunmit"></td> </tr> </table> </form> </div> </div> <div class="rg_right"> <p>已有账号?<a href="#">立即登录</a></p> </div> </div> </body> </html>
背景素材和验证码如下:
欢迎大家点赞转载学习,喜欢的点个关注!
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- 一天搞定CSS: 清除浮动(float)--13
- CSS自学教程--一天搞定CSS(终篇总结)
- 一天搞定CSS:背景background--03
- 一天搞定CSS: overflow--14
- 一天搞定CSS:盒模型content、padding、border、margin--06
- 一天搞定CSS:字体font--04
- 一天搞定CSS:文本text--05
- 一天搞定CSS:表格(table)--19
- java速成----一篇博文搞定基础
- 一天搞定CSS: 浮动(float)与inline-block的区别--11
- 一天搞定CSS(扩展):CSS Hack
- java速成----一篇博文搞定基础
- 一天搞定CSS:css选择器--07
- 一天搞定CSS:层级(z-index)--18
- 一天搞定CSS: 浮动(float)及文档流--10
- 一天搞定CSS:支持IE的Layout布局--16
- 一天搞定CSS:初识css--01
- 一天搞定CSS:表单(form)--20
- 一天搞定CSS: 浮动(float)的副作用--12
- 一天搞定CSS:BFC布局与普通文档流布局比较--15