全文手打,转载请注明出处
全文手打,转载请注明出处
全文手打,转载请注明出处
一)CSS了解
HTML负责布局;CSS负责美化
CSS:层叠样式表,美化网页,使结构(HTML)和表现(CSS)分离
CSS语法由三部分组成:选择器、属性、属性值
//基本语法 选择器 { 属性: 属性值; }
二)CSS的四种引入方式
区别:行间样式:只作用于当前标签
内部样式:只作用于当前文件
外部样式:可被多个HTML文件引用
在实际开发中,最多使用外部样式,link和import引入两种方式,,link更好一点点
//行间样式 <div style ="color:red;100px;border:1px solid blue;">行间样式</div> //内部样式表,,写到head里 <head> <style> p { background-color: #eee; font-size: 18px; font-style: italic; } </style> </head>
// 新建style.css文件 // 引入到<head>里 span { font-size: 15px; color: red; } <span>样式测试</span> //外部样式文件,,先建CSS文件,再link标签引入到文件 <link rel="stylesheet" href="style.css">
//导入外部样式,,先建CSS文件,在style标签中用import导入此样式文件
//CSS文件,,test.css
.box {
font-size: 15px;
}
//.html文件
<div class = "box">导入外部样式</div>
<style>
@import "test.css";
</style>
三)CSS选择器分类
<style> * { //*:匹配html所有元素,*性能差,要匹配所有元素,不推荐 } span { //标签选择器 display:block; //转化为块级元素 margin-right:20px; border:1px solid gray; } .wrapper{ //类选择器:匹配class命名的标签,class可批量定义 color:red; } #content { //ID选择器:匹配id命名的标签,唯一的 color:pink; } //派出选择器:根据上下文确定要选择的标签 //伪类选择器 </style> <p>p标签</p> <strong>strong标签</strong> <span>span标签</span> <div>div标签</div> <div class = "wrapper">div标签wrapper</div> <p class = "wrapper">p标签</p> <p id = "content">内容</p>
四)选择器分组
让多个选择器(元素)具有相同的样式,一般用于设置公共样式
<style> h1, .box, p{ //h1和box和p color:red; } p{ width: 100px; background-color:#aaa; } </style> <h1>h1</h1> <div class = "box">box</div> <p>p</p>
五)选择器继承
子元素可以继承父元素的样式,反之不行
<style> .test{ font-size:18px; //全是18px } .test span{ //test下的span font-weight:bold;
font-size:26px; //改写18变为26 } </style> <div class = "test">这是一段<span>内容</span>。</div>
六)优先级,,样式权重
内联样式>内部样式>外部样式
!important > style=" " > #id{ }id选择器 > .class{ }class选择器 > span{ }标签选择器 > 外部样式
<style> p { color:blue; //还是红色 color:blue!important; //提升权重,蓝色 } <style> <p style = "color:red;">测试内容1</p> //权重1 <p>测试内容2</p>
七)CSS字体样式属性
//font-size:字号
font-size:18px;
//font-family:字体
font-family:微软雅黑; //默认微软雅黑
//font-style:文字样式
font-style:normal; //默认正常字体
font-style:italic; //斜体
font-style:oblique; //倾斜的字体,有的字符没有斜体,只能用这个
//font-weight:文字加粗
font-weight:lighter; //较细
font-weight:normal; //正常 400
font-weight:bold; //较粗 700
font-weight:bolder; //更粗 900
font-weight:600; //设置数值100-900
//font复合属性:
//font:font-style font-variant font-weight font-size/line-height font-family
//属性值位置顺序
//font-size font-family这2个绝不可以省略
//line-height:行高,,文字底部到上一行文字底部的距离
line-height:normal; //默认行高
line-height:24px; //指定行高为长度像素
line-height:1.5; //指定行高为字体大小的1.5倍
//color:文字颜色
color:red; //颜色的英语单词
color:rgb(100,14,200); //RGB值,0-255
color:#123456; //指定颜色的16进制 ,推荐,,后6位(#rrggbb)或后3位(#rgb)
//text-decoration:文字修饰
text-decoration:underline; //下划线
text-decoration:line-through; //贯穿线
text-decoration:overline; //上划线
a{
text-decoration: none; //把a标签下划线取消掉
}
//text-align:文本对齐方式
text-align:left; //默认左对齐
text-align:center;
text-align:right;
//text-transform:字母大小写
text-transform:capitalize; //将每个单词的第一个字母转换成大写
text-transform:uppercase; //全转换成大写
text-transform:lowercase; //全转换成小写
//text-indent:文本缩进
text-indent:24px; //首行缩进xx像素
text-indent:2em; //首行缩进2个文字的大小
八)CSS背景
//background-color:背景色
background-color:3种red;
background-color:transparent; //透明色
//background-image:背景图
background-image:url(./images/bg.jpg);
background-image:none;
//background-repeat:背景图像铺排方式
background-repeat:repeat; //默认平铺repeat
background-repeat:no-repeat; //不平铺,直接展示图像大小
background-repeat:repeat-x; //横向平铺
background-repeat:repeat-y; //纵向平铺
//background-position:设置对象的背景图像位置
background-position:100px 50px; //图像左上角的点在(100,50)
background-position:center; //top/bottom/left/right
//background-attachment:设置对象的背景图像滚动位置
background-attachment:scroll; //默认scroll
background-attachment:fixed; //滚动条动,图像不动,固定
//background:设置背景复合写法
顺序:color image repeat attachment position
background:#999 url(images/pg.jpg) repeat-x fixed 20% 30%
九)CSS伪类选择器
伪类:专门用来表示元素的一种特殊状态
常用的伪类选择器:
<style> a:link { //a标签,,未访问状态,一般省略 color:red; } a:visited { //a标签,,已被访问状态 color:gray; } a:hover { //a标签,,鼠标悬停状态 color:yellow; } a:active { //a标签,,用户激活 color:blue; } input:focus { //form表单,,获得焦点 outline:1px solid #f00; } :first-child :last-child :nth-child(数字) ul li:first-child { color:red; } ul li:nth-child(2) { color:red; } </style> <a href = '#'>单击后跳转</a> <input type = "text"> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul>
十)属性选择器
[属性名]:包含有指定属性名的元素(常用)
[属性名=值]:属性名的值为指定值的元素(常用)
[属性名~=值]:属性名的值包含指定值的元素
[属性名^=值]:属性名的值以指定值开头的元素
[属性名$=值]:属性名的值以指定值结尾的元素
<style> div.content[title] { font-weight: bold; } input[name=usr] { background-color:#999; } </style> <div class = "content" title = "内容">content1</div> <div class = "content">content1</div> <form action = ""> <input type = "text" name ="account"> <input type = "text" name ="user"> </form>
十一)关系选择器
<style> h1 strong { //空格:后代选择器,儿子孙子都可 color:red; } h1>strong { //>:只选择儿子元素 background-color:red; } ul li+li+li { //+:兄弟选择器,找到第3个li,选择的是从第3个开始的兄的003,004 background-color:yellow; } </style> <h1><strong>关系1</strong><span><strong>关系2</strong></span></h1> <ul> <li>001</li> <li>002</li> <li>003</li> <li>004</li> </ul>
十二)CSS伪元素
//前面可以是1个冒号,也可是双冒号 //:before/:after/:first-letter/:first-line //前面必须是双冒号(不常用) //::selection/::placeholder/::backdrop <style> p:first-letter { font-size:30px 黑体; color:pink; text-indent:2em; } p:before { content:'★'; } </style> <p>abaabaababababababab</p>