0.快捷键:
对于webstom,先点击进入一个标签 按住alt 点击其他的标签里面,多点一些,可以同时操作,同时添加代码。
1.css定义
层叠样式表,主要作用对html的结构做外观样式的设置。 css是以html为基础。字体,颜色,背景,排版。 html层:结构层 css层:样式层 js层:行为层
2.如何编写css样式
*注意:所有的标签都可以有一个id属性,name 属性, style属性 - 缺省样式(浏览器样式) 所有的标签都有一个默认的样式,我们称为浏览器样式,或者默认样式。 - 行内样式 - 内嵌样式(嵌入样式) 在head标签中添加style标签 - 外联css样式,或者外部css样式 <link ref="stylesheet" href="css/main.css"> link写在head里面 - @import url(css/main.css); 导入样式 不推荐使用了
css语法
选择符,属性声明,括号,换行不敏感,空格不敏感。
div{color:red;}
css的简单属性:width,height,color,background-color,font-size
不建议写行内样式层叠
4.css选择器综述
<head>里面,<style>,p标签,*代表通配符选择器,通配符的穿透力很强,优先级高于继承的样式。 margin:外边距 padding:内边距id选择器:html标签都有公共id属性,而且整个页面唯一. id 选择器命名规范,只允许出现字母,大小写区分,下划线,数字;只允许字母开头;命名没有长度限制,可以是1个字母,也可以是多个;不允许出现标签名(工作经验的表现) 【#】 类选择器:class 【.】 类标签可有2个类:class="web demo" 建议大家多使用类选择器 复合选择器: 复合选择器是有2个或者多个基础选择器,通过不同的方式组合而成的。 a.标签制定式选择器(即...又...) 标签制定式选择器又称交集选择器,优两个选择器构成,其中年第一个为标记选择器,第二个为class选择器或者id选择器,两个选择器之间不能有空格,如h3.special或p#one b.后代选择器(包含选择器)后代选择器用来悬着元素或元素组的后代,其写法就是把外层的标记写在前面,内层标记写在后面,中间用空格分隔。当标记发生前台时,内层标记就成为了 .box li { color: green; } e.并集选择器 h1, h2, p { color: red;} f.子元素选择器 h1>strong { color: green;} g.属性选择器 h1[id] = {} 把h1有id的选择器拉出来 h1[class] = {} 把h1有class的选择器拉出来 h1[id][class] = {} 把h1同时拥有id和class属性的选择器拉出来
5.css伪类
:link 伪类将应用于未被访问的连接,IE6不兼容,解决此问题,直接使用a标签。:hover 伪类将应用于有鼠标的指针悬停于其上的元素,在IE6只能应用于a连接,IE7+所有元素都兼容。:active 伪类将应用于被激活的元素,如被点击的连接没被按下的按钮等。:visited 伪类将应用于已经被访问过得连接:focus 伪类将应用于拥有键盘输入焦点的元素
6.工具:
markman用于标注。
7.对齐:
<style> .main { width: 801px; margin: 0 auto; /* 上下:0 左右:auto */ }</style>
8.字体:
h1 { font: 24px "微软雅黑"; }
9.缩进:
.param_content { text-indent: 2em; /* 缩进2个字 */}
10.去掉下划线:
text-decoration: none;
作者:廖马儿
链接:https://www.jianshu.com/p/cb73996f658c