一、css的简介
1．什么是css和作用
层叠样式表(英文全称：Cascading Style Sheets)
2．css的运行环境
浏览器---内置css解析器---兼容性
3.CSS样式规则:CSS怎么使用
格式:
选择器{
属性1:属性值;
属性2:属性值;
...
}
选择器:要作用的HTML标签对象(标签(元素),id,class...)
属性:设置HTML对象显示样式(方式)
CSS样式一般写在HTML中head中
可是用head使用style标签,写CSS样式
style属性 type="text/css"
4.引入CSS样式的三种方式
1.行内样式
在HTML标签中,添加一个属性style="属性:属性值;属性:属性值;.."
作用范围:只对当前的HTML标签有效
2.内联(部)样式
在HTML的head标签中,写一个style标签,标签内部写CSS样式
作用范围:当前HTML页面所有同名的标签
3.外联(部)样式
创建一个文件,文件的后缀是.css
在文件中写CSS样式
在HTML的head中引入.css文件;哪个HTML引入了.css样式就作用哪个HTML
引入方式:在head添加一个标签link
属性:
type="text/css" 引入到的clss样式
rel="stylesheet" 引入的css文件和当前的HTML文件的关系 CSS是HTML的样式表
href="css/demo.css" 引入css文件的路径
优先级:
行内样式>内联样式|外联样式(写在后边的会覆盖写在前边的)
5.CSS的选择器:选择(找到)要添加样式的HTML标签
1.元素(标签)选择器
通过元素的名字,可以找到要添加样式的HTML元素
选择器使用格式:选择器的名称
2.id选择器
给元素添加一个属性id="选择器的名称"
选择器使用格式:#选择器的名称
注意:
HTML标签中id具有唯一性
如果给多个标签设置同一个id,那么后期用js获取这个标签对象的时候
只能获取第一个
标签会被封装为一个对象
3.类(class)选择器
给元素添加一个属性class="选择器的名称"
选择器使用格式:.选择器的名称
4.扩展 属性选择器
在元素选择器的基础上,再次对元素进行过滤
选择器使用格式:元素名[属性=属性值]
5.扩展 包含选择器
给标签的的后代设置样式
选择器使用格式:父类选择器 后代选择器
6.扩展 伪类选择器
用于超链接标签lvha
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 鼠标按住的链接 */
6. CSS样的的属性_
1.边框和尺寸
设置边框的属性:(图片,表格,div...)
border:设置元素的边框,设置元素的4个边框
border-top:设置上边框
border-left:设置左边框
border-right:设置右边框
border-bottom:设置下边框
属性值:3个属性可以一起设置,中间使用空格分隔
尺寸:单位是px像素
颜色:red..
样子:solid 实线，none 无边，double 双线 等
设置尺寸的属性
height:设置元素的高 单位像素px
width:设置元素的宽 单位像素px
2.块级元素:会单独的霸占一行或者多行
div,h1-h6,ul,ol..
行内元素:只占一行的一部分
span,a...
CSS样式的属性_转换属性
display:可以把块级元素和行内元素相互转换
属性值:
inline:把元素设置为行内元素
block:把元素设置为块级元素
none:把元素隐藏起来
3. CSS样式的属性_字体
颜色:color
大小:font-size
字体:font-family 幼圆,宋体....
text-decoration: none 取消文字上的下划线
4.给元素添加背景色:
属性:background-color:颜色
给元素添加背景图片
属性:background-image:url(图片的路径);
5.布局的属性:
float:让元素漂浮起来,不会独自霸占一行;把块级元素分成多个块
div是一个块级元素
常用属性值：
left：元素向左浮动
right：元素向右浮动
none：元素不浮动（默认值）
clear:取消浮动
clear: both;
7.盒子模型:使用一个盒子把html标签对象装起来
外边距:盒子与盒子(页面)之间边距
属性:margin:设置4个外边距 值:像素px
margin-top:上外边距
margin-left:左外边距
margin-right:右外边距
margin-bottom:下外边距
内边距:盒子和盒子中的元素之间的边距
属性:padding:设置4个内边距 值:像素px
padding-top:上内边距
padding-left:左内边距
padding-right:右内边距
padding-bottom:下内边距
前端页面注册案例分析:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>前端页面注册案例</title> <style type="text/css"> /*5.通过CSS设置div和标题和span的样式 */ /*设置classs是white的div的样式*/ .white{ border: 1px #000000 solid; width: 700px; height: 500px; background-color: #FFFFFF; margin: 150px auto; padding-top: 30px; padding-left: 150px; } .divReg{ width: 500px; height: 450px; } h3{ color:blue; font-size: 20px; } h3 span{ color:black; font-size: 16px; } </style> </head> <!--1.给body增加一个背景图片--> <body style="background-image: url(img/bg.jpg);"> <!--2.创建一个白色背景的div--> <div class="white"> <!--3.在白色白色背景的div在创建一个表单注册的div--> <div class="divReg"> <!--a.用户注册 USERREGiSTER 标题标签嵌套一个span--> <h3>用户注册 <span>USERREGiSTER</span></h3> <!--b.创建一个5行3列的表格--> <table width="500px"> <tr> <td align="right">用户名</td> <td><input type="text" placeholder="请输入用户名"/></td> <td></td> </tr> <tr> <td align="right">密码</td> <td><input type="password" placeholder="请输入密码"/></td> <td></td> </tr> <tr> <td align="right">性别</td> <td> 男<input type="radio" name="sex"/> 女<input type="radio" name="sex"/> </td> <td></td> </tr> <tr> <td align="right">验证码</td> <td width="50px"><input type="text"/></td> <td align="left"><img src="img/checkcode.jpg"/></td> </tr> <tr> <td></td> <td><input type="image" src="img/btn.jpg"></td> <td></td> </tr> </table> </div> </div> </body> </html>
