css可以写在哪里
1.和要装饰的标签写在一起 2.内部样式表(内嵌式)是写在head头部标签中，并且用style标签定义 3.外部样式表(外链式) <head><link rel="stylesheet" href="commons.css"></head> 做到结构、样式、行为的分离
4.基本选择器
标签选择器:设置原有的标签们如:divs、pan标签、h标签 类选择器:把样式写到head里面，以.开头命名，对应的div里得有相同的名字 样式显示效果跟HTML元素中的类名先后顺序没有关系，与书写的上下顺序有关,多类名用空格隔开 id选择器:是唯一的，只能被使用一次，方便被找到一般被js用
5.字体设置
font-size:字号大小,常用单位:px
font-family:字体,宋体、微软雅黑
font-weight:字体粗细,b或strong让字体加粗,normal(400)、bold(700)
font-style:字体风格,i或em让字体变倾斜,normal取消倾斜;italic添加倾斜
font字体连写的基本语法:
选择器{font:font-style font-weight font-size/line-height font-family}
不需要的属性可以省略，但字体大小和类型必须保留
6.文本设置
color:字体颜色 line-height:行间距，一般比字体大7、8像素就行 text-align:水平对齐方式，例:让某标签内的文字居中对齐 text-indent:2em,1em就是一个字的距离。段落首行缩进 text-decoration:u或ins加下划线,s或del加删除线 none(取消装饰),underline(下划线),line-through(删除线)
7.复合选择器
后代选择器指的是所有后代,又称包含选择器,例如div p{},两者用空格隔开
子代选择器,用大于号隔开,子指的是亲儿子(直系亲属),例如ul li > a{}
交集选择器,用点号隔开,某标签.某class,既...又...(p.box-<p class="box"></p>)
并集选择器,用逗号隔开,一个占一行,适合-集体声明，相同样式，例如:div,p,span
8.链接伪类选择器
<style> {#未访问过的状态#} a:link{ color: #3c3c3c; font-size: 25px; text-decoration: none; font-weight: 700; } {#访问过后的状态#} a:visited{ color: orange; } {#鼠标经过时的状态#} a:hover{ color: #f10215; } {#鼠标按下时的状态#} a:active{ color: green; } </style> 这四个如果要都写的话，那么顺序不能乱，lv-hao 但一般是这么写的： a { color: #3c3c3c; font-size: 25px; text-decoration: none; font-weight: 700; } a:hover{ color: #f10215; } .类名，然后TAB直接生成<div class="类名"></div> input:属性，然后TAB直接生成<input type="属性" name="" id="">
9.显示模式
块级元素(block)独自占一行或多行，可以对其设置宽度、高度、对其等属性 行内元素(inline)-<a>、<span> 高、宽无效，默认宽度就是它本身内容的宽度 行内块元素(inline-block)--<img />、<input /> display可以将三者相互转换(行话叫-显示模式)
10.居中
行内元素、行内块元素可以当成文字来看,让这三个a标签居中,可以写
.nav{text-align: center;},这个类中的标签必须是行内或行内块
<div class="nav">
<a href="#">网站导航</a>
<a href="#">网站导航</a>
<a href="#">网站导航</a>
</div>
line-height:行高等于盒子高度,可以让单行文本垂直居中,不给行高那就只有文本高度
行高小于盒高,文字偏上。
h、p标签都是文字类的块级元素，里面不再放块级元素,a可以放块级元素
基线和基线之间的距离称为行高
11.三大特性
一、层叠性:权重相同则就近原则、后来者居上 二、继承性:子标签会继承父标签的某些样式,如文本颜色和字号,高度等不会继承 三、优先级:权重:*和继承-0,0,0,0;标签-0,0,0,1;类伪类(.)-0,0,1,0; ID(#)-0,1,0,0;行内样式-1,0,0,0;!important-无穷大 权重可以叠加: div ul li -- 0,0,0,3;.nav ul li -- 0,0,1,2;a:hover -- 0,0,1,1 自己设置了样式,父辈的样式不继承
12.背景设置
div{
background-color: purple;
background-image: url(image/1.jpg);
background-repeat: no-repeat;
background-attachment: fixed; 背景附着-scroll:图像随内容滚动;fixed:背景图像固定
background-position: x y;
background-position: center center;(top bottom left right center)
}
position后面如果只写一个方位名词,另一个默认是居中的;可以跟数值,
必须有顺序;两者也可以混搭,图片默认会左上角，
一般会给一个position:center top;no-repeat;颜色:#fff
background简写:顺序官方没有强制标准,建议大家如下写：
background:背景颜色 背景图片 背景平铺 背景滚动 背景位置
background:transparent url(image/1.jpg) no-repeat fixed center center
例：一个盒子中图片默认是left top，想要鼠标放上去之后变成底对齐用position
css3透明度：background:rgba(0,0,0,0.8)--黑色背景透明度为8
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .nav{ height: 50px; border-top: 3px solid #FF8500; border-bottom: 1px solid #EDEEF0; background-color: #FCFCFC; } .nav a { height: 50px; line-height: 50px; display: inline-block; color: #4c4c4c; text-decoration: none; padding-left: 16px; padding-right: 16px; font-size: 14px; } .nav a:hover{ background-color: #edeef0; color: #ff8400; } </style> </head> <body> <div class="nav"> <a href="#">首页</a> <a href="#">新闻客户端</a> <a href="#">设为首页</a> <a href="#">微博</a> </div> </body> </html>