css基本语法
【W3C倡导的Web结构】
1.内容与表现分离。html与css分离。
2.内容与⾏为分离。html与javaScript分离。
3.html代码，必须要实现语义化。
【W3C的规范】
1.标签名和属性名称必须⼩写。
2.html标签必须关闭。
3.属性值必须⽤引号括起来。
4.标签必须正确嵌套。
①嵌套的标签，不能发⽣交叉
②块级标签可以包裹⾏级，⾏级标签不能包裹块级；p标签不能包裹p标签等。。
1、引⼊CSS的三种⽅式
1.⾏内样式表
直接在html标签中，使⽤是的⽅式引⽤；
< div ></div>
优点：使⽤灵活，优先级权重最⾼
缺点：不符合W3C关于“内容与表现分离”的要求，不利于样式复⽤；
2.内部样式表
在<head></head>标签中，使⽤<style>标签包裹css代码；
<style type="text/css">
#div{
width: 100%;
height: 200px;
background-color: darkgray;
box-sizing: border-box;
}
特点：⼀定程度的实现了html与css的分离，但是分离不够彻底，没有办法实现多页⾯公⽤样式。
3.外部样式表
将css单独写⼊css⽂件中，并于html⽂件关联。
优点：彻底实现html与css的分离，符合W3C规范，有利于多页⾯复⽤统⼀样式。
[导⼊css⽂件的两种⽅式]
①在<head>标签中，使⽤link链接：
<link rel="stylesheet" type="text/css" href="css/02css.css"/>
②在style标签中，使⽤@import导⼊：
<@import url（"css/02css.css"）/>
2、CSS常⽤选择器
注意：
选择器的命名规范
1.只能有字母、数字、下划线、减号组成；
2.开头不能⽤数字。也不能只是⼀个减号。
⼀般，起名要求有语义，使⽤英⽂单词和数字组合。
标签选择器
写法：html标签名{}
div{}
作⽤：可以选中页⾯中，所有与选择器同名的html标签。
类选择器（class选择器）
写法：.class名{}
.div{}
调⽤：在需要调⽤选择器样式的标签，使⽤class="class名"调⽤选择器。ID选择器
写法：#ID名{}
#div{}
作⽤：需要调⽤样式的标签，起⼀个id=“ID名”
优先级：ID选择器>class选择器
注意：⼀个页⾯中，不能出现同名ID
通⽤选择器
写法：*{}
*{}
作⽤：选中页⾯中所有标签。
后代选择器
写法：选择器1 选择器2 ...选择器n 选择器之间⽤空格分隔。
⽣效规则：只要满⾜，后⼀选择器是前⼀个选择器的后代，即可⽣效。（后代包括⼦代、孙代、重孙代。。）通俗的讲：只要后⼀个选择器在前⼀个选择器⾥⾯即可。
div .ul{}
⼦代选择器
写法：选择器1>选择器>...选择器n{} 选择器直间⽤>分隔
⽣效规则：必须满⾜，后⼀代选择器是前⼀代选择器的直接⼦代，才能⽣效（中间不能隔任何标签）
div>ul>li{}
并集选择器
写法：选择器1，选择器2，.....选择器n{}
⽣效规则：多个选择器取并集，只要标签满⾜任意⼀个选择器，样式即可⽣效。
div1,div2{}
交集选择器
写法：选择器1选择器.....2选择器n 所有选择器紧挨着，没有分隔
⽣效规则：多个选择器取交集，则必须满⾜所有选择器的要求，才能⽣效。
.div1.li{}
伪类选择器
写法：选择器名称：伪类状态{}
.
div:hover{}
常见的伪类状态：①link 未访问状态；②visited 已访问状态；③hover ⿏标指上状态；
  　④active 激活选定状态；⑤focus 获得焦点时状态(input常⽤)。
注意：伪类共存时的顺序必须按此顺序。
.a:link{
color: blue;
text-decoration: none;
}
.a:visited{
color: red;
text-decoration:overline;
}
.a:hover{
color: yellow;
text-decoration:underline;
}
input:focus{
}
★选择器的优先级
1 、第⼀原则：近者优先！最内层选择器>>>>>>>外层
例如：div ul li > div #ul
li在ul内层，所以li标签选择器能覆盖外层id选择器
2 、当作⽤在同⼀层时：ID选择器>class选择器>标签选择器
例如：div #li > div .li > div li
只要最后⼀个选择器都作⽤于li上，那⽆论之前有多少层
选择器嵌套，均没有远近关系。
3 、当作⽤于同⼀层，且最后⼀层为同等选择器。
例如： div ul .li > div li
作⽤范围越精准，则优先级更⾼。
div border属性4、当优先级完全相同时，写在后⾯的选择器会覆盖前⾯的选择器。
3、css常⽤⽂本属性
css中的颜⾊表⽰⽅式
①直接使⽤颜⾊的单词表⽰：red、green、blue
②使⽤颜⾊的⼗六进制数表⽰：#ff0000
六位数两两分组，分别表⽰红、绿、蓝的配⽐。
③rgb（0~255，0~255，0~255）；三位数分别表⽰红、绿、蓝的配⽐。rgba（）；第四位数表⽰透明度。
1.字体、字号类：
① font-weight: 字体粗细
bold：加粗、 normal：正常、lighter：细体
也可以使⽤100-900数值，400表⽰normal，700表⽰bold
② font-style：字体样式
italic：倾斜
③ font-size: 字体⼤⼩
可以写px单位，也可以写% 200%表⽰浏览器默认⼤⼩（16px）的两倍=32px ④font-family：字体系列（字体族）。
可以直接写字体名，也可以写字体系列
常⽤字体系列：serif-衬线体
font-family可以接受多个值，⽤逗号分隔。表⽰优先使⽤第⼀个，
如果没有这个字体，依次向后使⽤。通常，最后⼀个值放字体系列名；eg：font-family: "⿊体","微软雅⿊",sans-serif
⑤ font缩写形式：
顺序必须是:
font-weight font-style font-size/line-height font-family
不同属性之间，⽤空格分隔。
font-size/line-height必须⼀组，⽤/分隔。
font-family多个字体之间，⽤逗号隔开。
eg：font： bold initial 32px/50px "微软雅⿊",serif;
2.字体颜⾊
① color：字体颜⾊可以使单词、16进制、rgb等
② opacity：透明度，可选值0-1
[opacity和RGBA的区别]
RGBA本⾝可以设置颜⾊，⽽opacity必须配合其他颜⾊属性来使⽤；RGBA仅仅是让当前元素设置的颜⾊透明；
⽽opacity，会让当前元素⾥⾯的所有⽂字、背景、⼦元素都透明；
3.⾏距、对齐类：
① line-height:⾏⾼。可以写px单位、可以直接写数字（默认⾏距的⼏倍）、可以写%（表⽰默认⾏距的百分⽐）
⾏⾼重要重要作⽤：让单⾏⽂字在div中垂直居中。
设置⾏⾼等于div的⾼度，即可让单⾏⽂字垂直居中。
② text-align：设置区域内的⾏级元素⽔平对齐⽅式left/center/right
③ letter-spacing：字符间距，字与字之间的距离。
④text-decoration:⽂本修饰；
underline 下划线、 overline 上划线、line-through 删除线、 none
⑤ overflow：设置超出区域⽂字的显⽰⽅式。
overflow:hidden；超出区域的⽂字隐藏不显⽰
overflow:scroll；⽆论⽂字多少，都会显⽰⽔平垂直滚动条。
overflow:auto；⾃动，⽂字多显⽰滚动条，⽂字少不显⽰滚动条。
可以使⽤overflow-x和overflow-y单独修改两个⽅向的滚动条
overflow-x:scroll;overflow-y:hidden;
⑥ text-overflow：设置⾏末多余⽂字的显⽰⽅式
clip-多余⽂字剪裁掉 ellipsis-多余⽂字省略号显⽰
显⽰省略号，需要配合white-space: nowrap；使⽤
【重点】设置⾏末显⽰省略号（三⾏代码，缺⼀不可）
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
⑦ white-space: nowrap; 设置中⽂⾏末，不断⾏显⽰。
⑧ text-indent: ⾸⾏缩进

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。