CSS基础（一）
全文手打，转载请注明出处
全文手打，转载请注明出处
全文手打，转载请注明出处
一）CSS了解
HTML负责布局；CSS负责美化
CSS：层叠样式表，美化网页，使结构（HTML）和表现（CSS）分离
CSS语法由三部分组成：选择器、属性、属性值
//基本语法 选择器 { 属性: 属性值; }
二）CSS的四种引入方式
区别：行间样式：只作用于当前标签
内部样式：只作用于当前文件
外部样式：可被多个HTML文件引用
在实际开发中，最多使用外部样式，link和import引入两种方式，，link更好一点点
//行间样式 <div style ="color:red;width: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>
