css基础

CSS 是什么

• 层叠样式表(Cascading Style Sheet)
• 也就是说可以将不同效果反复层叠实现想要的显示
• 例如：word 加入颜色、大小、行距、斜体

CSS 的三种声明方式

• 行内样式表(标签 style 属性)
• 内联样式表(头部 style 标签)
• 外联样式表(加载外部文件)

CSS 语法特点

• 大括号包围
• 键值对形式
• 中间接冒号
• 结尾加分号
• 注释：/**/
• 常用的属性：宽高、颜色、背景

一. 选择器

• 标签选择器
• class 选择器
• id 选择器
• 组合选择器
• 层级选择器
• 伪类选择器 input(focus hover)
• 属性选择器 input[type=“text”]
• 通配符选择器 *

* {
  margin: 0;
  padding: 0;
  font-size: 14px;
}
input[type="password"] {
  background-color: yellow;
}
#btn li a {
  text-decoration: none;
}
#btn li a:first-child {
  color: red;
}
#box li:first-child {
  color: pink;
}
#box li:last-child {
  color: green;
}
#box li:nth-child(2n) {
  color: blue;
}
#btn1 a:link {
  color: red;
}
#btn1 a:visited {
  color: orange;
}
#btn1 a:hover {
  color: aqua;
}
#btn1 a:active {
  color: yellow;
}
.bq a:nth-child(-1) {
  color: yellow;
}
input:focus {
  background-color: green;
}
input:hover {
  background-color: pink;
}

<ul id="btn">
  <li><a href="#">九江</a></li>
  <li><a href="#">濂溪区</a></li>
  <li><a href="#">莲花镇</a></li>
  <li><a href="#">莲花大道</a></li>
  <li><a href="#">九江职业技术学院</a></li>
</ul>
<ul id="box">
  <li>first-child</li>
  <li>nth-child(2n)</li>
  <li>child</li>
  <li>nth-child(2n)</li>
  <li>last-child</li>
</ul>
<div id="btn1">
  <a href="http://www.baidu.com">跳转到百度</a>
</div>
<div class="bq">
  <a>标签1</a>
  <a>标签2</a>
  <a>标签3</a>
  <a>标签4</a>
</div>
<input type="text" name="username" />
<input type="password" name="username" />

演示

二. 继承

继承性: 一般只继承文本属性,例如:大小\颜色\尺寸

三. 优先级

1. 单个选择器优先级: 行内样式 > id 选择器 > class 选择器 > 标签选择器
2. 内联和外联优先级: 外联 > 内联
3. 多个选择器优先级 :设置的越精确,优先级越高

四. 元素

1. 行内元素 a span
2. 块元素: div p ul ol li dt dd dl h1-h6 header footer section main aside
3. 行内块元素: input img

五.常用属性

1. 宽高

• width/height;
• min-height/max-height/max-width/min-width(了解)

2. 单位

• px: 单位:像素
• em: 相对于父级
• rem: 相对于 html
• %: 相对于父级

#bt {
  width: 90%;
  min-width: 300px;
  height: 100px;
  border: 1px solid red;
  font-size: 2em;
}
#bt1 {
  width: 50%;
  height: 60px;
  border: 1px solid green;
  font-size: 3rem;
}

这是默认字体
<div id="bt">
  这是父级
  <div id="bt1">这是子集</div>
</div>

演示

3. 字体

• font-size:字体大小
• color:颜色
• font-weight:加粗 normal bold 100-900
• font-family:字体 黑体 宋体 微软雅黑
• font-style:字体样式:normal italic(斜体)

4. 文本属性

• text-indent:首行缩进 单位:em
• text-align:left center right:文字对齐方式

5. 设置文本超出问题
   overflow: hidden; text-overflow:ellipsis; white-space: nowrap;一起使用

#text {
  width: 300px;
  height: 60px;
  background: green;
  overflow: hidden;
  text-overflow: ellipsis;
  /*强制不换行*/
  white-space: nowrap;
  text-decoration: underline;
}

单行文本溢出

#text1 {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* display: block; 或*/
  float: left;
}

• overflow:visible scroll hidden auto;
• text-overflow:clip:截断 ellipsis:省略号
• white-space: normal nowrap
• text-decoration:(none(默认), underline(下划线), overline(上划线)
• line-through(中行线/删除线))
• text-shadow:h-shadow v-shadow blur color(了解)
  第一个值:水平偏移距离 既可以是正值也可以是负值
  第二个值:垂直偏移距离
  第三个值:模糊距离
  第四个值:模糊颜色

  text-shadow: -10px -20px 10px blue;

• vertical-align:垂直方向对齐方式 top middle bottom;
  需要设置 line-height,在图片后面加上 span 标签

#img {
  width: 200px;
  height: 200px;
  background: red;
  line-height: 200px;
}
img {
  width: 50px;
  vertical-align: middle;
}

<div id="img"><img src=".\9.23/lo2.jpg" /><span></span></div>

• line-height:行高
  

6. 背景

• background-color:背景颜色
• background-image:背景图片 默认平铺
• background-repeat:(repeat, no-repeat repeat-x repeat-y)
  repeat: 默认是重复
  no-repeat: 不重复
  repeat-x: 水平方向重复图片
  repeat-y: 垂直方向重复图片
• background-attachment: 设置背景图像是否固定或者随着页面的其余部分滚动。
  fixed: (了解) 当页面的其余部分滚动时，背景图像不会移动。
  local: 内容滚动时,背景图片也跟着一起滚动
  scroll: 内容滚动时,背景图片不动
  -background-position: (left center right bottom top xy值 )
  x: 水平方向偏移值
  y: 垂直方向偏移值
• background:

background-color: pink;
background-image: url(yangmi1.jpg);
background-repeat: no-repeat;
background-position: -151px -173px;
简写形式:
background: pink url(yangmi1.jpg) no-repeat -151px -173px;

7. 列表

• list-style: 默认li前边有实心原点, none(没有原点)
• list-style-image: url(图片路径)
• list-style-position: inside(小点在li 的里边) outside(小点在li的外边,默认属性)
• list-style-type: ul中小点的类型:circle decimal square

8. 布局

• float: left, right
  left: 左漂移,相对原来的层面浮起来,后边的内容会自动补齐:
  right: 右漂移.相对原来的层面浮起来,后边的内容会自动补齐
• clear:(left right both)
  在设置其他元素,如果有浮动,这时浮动元素会把下面的元素内容给覆盖,这时需要清除浮动,然后在浮动元素的下面来布局.
  一般清除浮动: clear: both
• display: (none inline-block block ,inline)
  none: 标签消失,并且位置也不存在了,其他的元素向上补齐
  inline-block: 转换为行内块元素
  block: 转换为块元素
  inline: 转换为行内元素
• visibility:(visible, hidden)
  hidden: 标签隐藏了,但是位置还在… [注]一般跟 display:none 作比较
  visible: 默认属性,标签和位置都是可见
• overflow:(visible hidden scroll auto)
  hidden: 隐藏超出 div 框的内容部分
  scroll: 让超出的内容设置滚动条
  auto: 自动 如果内容没有超出 div,没有滚动条,如果内容超出 div,这时自动增加滚动条
  visible: 默认属性
  overflow-x:使用属性时,设置的值跟上边完全一样,指水平方向
  overflow-y:使用属性时,设置的值跟上边完全一样,指垂直方向

9. 定位

• position:(relative(相对), absolute(绝对), fixed(固定) static)子元素为绝对定位.
  fixed: 生成绝对定位的元素，相对于浏览器窗口进行定位 设置 top right bottom left 时,是相对于整个窗口(html/body)而言
  relative: 设置相对位置,相对自己原来的位置,进行移动 不会脱离文档流
  absolute: 绝对定位,脱离文档流 要设置绝对位置,首先要有一个相对位置,再来设置绝对位置
  z-index: 只有在 relative 和 absolute 属性中才会有的效果, 值设置的越大就显示谁的效果(优先级越高)
  [注]只要是 relative absolute fixed 时,我们就可以设置下边的属性
  top: right: bottom: left:

10. 边框

• border-color: 边框的颜色
• border-width: 宽度
• border-style: (dotted：点线 solid：实线 dashed：虚线 double：双线)
• border-radius: 圆角半径
• box-shadow: box-shadow: 1px 1px 20px green;(水平偏移距离，垂直偏移距离，模糊距离，颜色)

11. 盒子模型:

• 自动居中:
• 简写形式:

12. 内外边距

• padding:上 右 下 左 padding-top: padding-right: padding-bottom: padding-left:
• margin:上 右 下 左 margin-top: margin-right: margin-bottom: margin-left: