黑马程序员技术交流社区
标题: css基础 [打印本页]
作者: 良良没有凉凉 时间: 2018-11-28 11:04
标题: css基础
css 目的
美化网页 - 把html打扮的漂亮一些，布局更自由丰富一些
选对人-- 做对事
选择器：
目的： 选择标签
基础选择器：
标签选择器;
选择某部分标签 比如可以选择所有的div 标签 所有的p标签
p { color: red;} 把所有的p 颜色改为红色
类选择器;
选择一个或者多个标签
用点来声明 class 来调用
.demo { color: red;} 我们声明了一个类名为 demo 的类 <div class="demo"></div可以重复使用很多很多次
id选择器;
用方法和类相同
只能使用一次 唯一的
#demo { color: red;} 我们声明了一个类名为 demo 的类 <div id="demo"></div>
通配符选择器
* 所有的 选择所有的标签，殊情况使用。
样式表分类（位置）：
行内式：
<div style="color:red;" ></div>
内嵌式：
<head> <style></style></head>
外部式：
结构和样式相分离
用link 标签给他们建立连接
常见文字css属性
字体：
font-style跟斜体有关系 em i
font-weight字体加粗 strong b h
font-size别忘了跟单位（px）
font-family综合写法
font: 斜体 加粗 字号/行高 字体;
综合写法 字号和字体一定不能省略
文本：
color十六进制的颜色必须 # 开头
line-height行高
text-align让盒子里面文本或行内块元素水平居中对齐
text-indent首行缩进 例：text-indent:2em; 首行缩进2个字
text-decroation文本的修饰none取消下划，underline添加下划线
复合选择器
后代选择器 .nav p 选择元素的子孙后代
子元素选择器.nav>p 选择元素的子元素
交集选择器h3.class既有h3标签的特点，又有class标签的特点
并集选择器p,h3,a可以选择任何形式的选择器
链接伪类选择器a:link/visited/hover/active用于给链接添加特殊效果（其他标签也可是使用）
标签显示模式
块级元素（block）：独占一行可以设置宽度，高度等如果没有设置宽度，继承父元素的宽度，不继承高度里面可以放任何其他元素，（文字类块级元素不可以）
行级元素(inline)：不单独占一行，可以设置宽高等，里面只能放文字或者其他行内元素内容多大，宽高有多少
块级行元素(inline-block)：可以一行显示多个，（默认中间会有缝隙）；默认宽度是本身的宽度；可以设置宽高等
模式转换
display
block,块级元素
inline,行级元素
inline-block,行级块元素
背景：
背景颜色：background-color:color默认值是transparent,透明的
背景图片：background-image: url( 图片地址 )
背景平铺：background-repead：repead/no-reapead/repead-x/repead-y默认是repeat
背景位置：background-position:x y，x:left/right/center/像素值 默认值是centery:top/bottom/center/像素值 默认值是center，x在前，y在后
背景附着:background-attachment:scroll/fixed默认值是scroll
背景简写:background: color url(图片地址) repeat scroll x y
背景透明（css3):background:rgba(0,0,0,0.1)（控制单一颜色的透明度）最后一位取值在0-1之间，可以省略0，opacity:控制整个元素和它的子元素的透明度（css3）
CSS三大属性
层叠性：相同权重的重复样式，后面的会覆盖面前的（长江后浪追前浪，前浪死在沙滩上）
继承性：子元素会继承父元素的样式，font-,text-.line-,color
优先级：权重计算公式，通配符0>标签选择器1>类选择器10>id选择器100>行内样式表1000>！important∞。权重可以叠加，不会进位，继承权重最小，小于通配符。
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |