前端基础_CSS

CSS 书写语法

  • 内部与外部样式
选择器 {
    样式1;  // 属性: 值; width: 300px
    样式2;
}
  • 内联样式
<div style="样式1;样式2"></div>   // width: 300px

CSS 基础选择器

  • ID选择器
#id{ }
  • class选择器
.cls{ }
  • 元素选择器
div{ }
div.cls{ }
以上三种基本选择器可以拼接在一起,匹配更准确 例如:div.cls{ }
选择器的作用:匹配HTML元素

CSS 高级选择器

  • 组合选择器
element,element{ }
  • 通配符选择器
*{ }
  • 后代选择器
pElement subElement{ }
  • 子元素选择器
pElem > subElem{ }
  • 相邻兄弟选择器
div + a{ }    // 选择div后面相邻的a标签
  • 属性选择器
[attribute]{ }
element[attribute]{ }
element[attribute=value]{ }
  • 伪类选择器
a:link {color: #FF0000}        /* 未访问的链接 */
a:visited {color: #00FF00}    /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}    /* 选定的链接 */
p:first-child { }
  • 伪元素选择器
div::after{ content:"" }
div::before{ content:"" }

CSS 优先级

内部样式外部样式合并
!important > 行间样式 > ID选择器 > 类选择器/属性选择器/伪类选择器 > 元素选择器/伪元素选择器 > 通配符选择器

.cls{}      //0-0-0-1-0
#id{}       //0-0-1-0-0
div.cls{}   //0-0-0-1-1

CSS 常用样式

  • 文字
字体:font-family: "Times New Roman", Times, serif;
颜色:color: red;
字体大小:font-size: 40px;
字体粗细:font-weight: 900;
字体样式:font-style:italic;
  • 盒子
外边距:margin:15px;
内边距:padding: 20px;
边框: border: 1px solid #999;
宽: width: 500px;
高: height: 400px;
  • 背景
集成属性写法:
background: #0079D2 url(img/jt.jpg) no-repeat fixed 50% 20%;

单个属性写法:
背景图大小:background-size:80px 60px; 
背景颜色:background-color:yellow;
背景图位置:background-position:center; 
背景图重复:background-repeat:no-repeat;
背景图:background-image:url('paper.gif');
  • 行高
line-height: 30px;     // 文字居中使用  取值可以是%,数值,像素
  • 显示与隐藏
1、display
隐藏样式:display:none;
显示样式:display:非none的其它值

2、visibility
隐藏:visibility:hidden;
显示:visibility:visible;
  • 定位
position

取值:absolute、relative、fixed

1、绝对定位

CSS 布局

  • html标签分类
块级元素(block)
1、可以设置宽、高,不设置宽度,默认100%
2、独占一行
3、块级元素可以嵌套块级元素和行内元素

行内元素(inline)
1、行内元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行
2、不支持设置宽、高,其宽和高随元素的内容而变化
3、行内元素只能嵌套行内元素,不能嵌套块级元素和行内块元素

行内块元素(inline-block)
1、可以设置宽、高
2、行内元素不会独占一行
3、块级元素可以嵌套块级元素和行内元素
  • 布局种类
1、table 表格布局
2、float 浮动布局 (重点)
3、inline-block布局
4、flexbox 布局  (现在布局方式)
  • float 浮动布局
容器需要清浮动,子元素需要浮动(float: left/right;)
/*清除浮动代码*/
.clearfloat:after{display:block;clear:both;content:"";}
.clearfloat{zoom:1}    /*可解决ie6,ie7浮动问题*/

相关推荐