你将获得

掌握某些知识点
学会某些技巧（或思路）

教学服务

1v1专属答疑服务
BAT专家面试辅导

讲师介绍

易大司

大家好，欢迎大家关注我们梦豆学院，我是易老司机！很高兴为大家服务

波老师

Java高级讲师，Java项目经理、熟练使用SSM、SSH、熟悉Java设计模式

课程详情

加入官方qq群：168194553免费答疑
一、CSS
1、概述
级联样式表/层叠样式表（cascading style sheet）
美化网页，定义网页外观
2、语法
选择器{
   样式属性名1:样式属性值;
   样式属性名2:样式属性值;
   样式属性名3:样式属性值;
   ...
}

3、选择器
a)元素/标签选择器 A
   通过标签名来选择
b)类选择 .class
   通过标签的class属性值来选择
       <div class="a b c">
   .a{

   }
   .a.b{

   }
c)儿子选择器 A>B
   选择A下面的B
d）后台选择器A B
   选择A下面的所有B
e）id选择器 #id
   通过标签的id属性值来选择
f）通用选择器 *
*{
   margin：0
   padding：0；
}

g）兄弟选择器 A+B
   选择所有A后面的B

h)伪元素选择器 ::
::after
::before
i）伪类选择器 :
:hover
:active
:link
:visited
:focus
:nth-child(n)
j)属性选择器 []
a[href]
a[href="xxx"]

css选择器优先级
行内样式 1000
id选择器 100
类选择器或伪类选择器或属性选择器 10
元素选择器或伪元素选择器 1
忽略通用选择器

UL OL+LI =3
H1 + *[REL=up] =11
UL OL LI.red   =13
LI.red.level =21
#x34y =100
#s12:not(FOO) =101

div{
   background:red !important;
}

4、单位
长度：
   px 像素
   em 元素当前字体大小
颜色：
   颜色名称
       red green blue white black gray yellow
   RGB
       #fff #f00
   RRGGBB
       #FFFFFf #FF0000
   rgb(255,255,255)

   rgba(255,255,255,0.5)

   HSL(120,65%,75%)
   HSLA(色调，饱和度，亮度，α)
   transparent 透明
5、网页应用样式
a）内部样式
在<head>标签中使用<style>,把css写在其中
b）外部样式
把样式表写到.css文件，然后<link rel="stylesheet" href="xx.css">
c)行内样式
<div style="width:100px;height:100px" style="width:100px;height:100px">
6、层叠的含义
优先级从底到高
1）浏览器默认样式
2）用户设置的样式
3）外部样式
4）内部样式
5）行内样式

二、样式属性分类
1、边框
   border:宽度类型颜色
   border-width:
   border-style:    类型:solid/dotted/none
   border-color:

   border-top:
       border-top-style:
       border-top-width:
       border-top-color:
   border-bottom:
   border-left:
   border-right:

2、背景
background
   background-color:颜色
   background-image:url(图片路径)
   background-repeat:
   background-position:
   background-size：
3、盒子模型（box-model）
box-sizing:
   content-box(默认值)
       width/height=内容的高宽
       所占区域=width+padding+border+margin
   border-box
       width/height=内容的高宽+内边距+边框
       所占区域=width+margin

margin 外边距
padding 内边距
   padding:
   1px;(上1右1下1左1)
   1px 2px;(上1右2下1左2)
   1px 2px 3px;(上1右2下3左2)
   1px 2px 3px 4px;(上1右2下3左4)
   padding-top
   padding-bottom
   padding-left
   padding-right
max-width
min-width
max-height
min-height
4、文本字体
font:
   font-style:italic/normal
   font-weight:bold/normal
   font-size/line-height:12px/行高
   font-family:字体
color:字体颜色
text-align:left/right/center/justify
text-decoration:underline/line-through/overline/none
text-indent:2em
white-space：规定如何处理元素中的空白pre/nowrap
text-overflow：ellipsis/clip/自定义

5、表格和列表
border-collapse:sperated/collapse
border-spacing:12px
table-layout:fixed/auto
list-style:none
   list-style-position:inside/outside
   list-style-image:
   list-style-type:none/...

6、定位
position:
   static(静态定位默认值)
       块级元素从上到下依次摆放，行级元素从左到右依次摆放
   relative(相对定位)
       相对于其静态定位的位置，通过left/right/top/bottom进行偏移
   fixed（固定定位）
       相对于浏览器左上角为原点，通过left/right/top/bottom进行偏移
   absolute（绝对定位）
       相对于找到的第一个非静态定位的父元素，通过left/right/top/bottom进行偏移
       如果未找到，则相对于浏览器浏览器左上角
float:left/right/none
   如果碰到父容器的边界或其他浮动元素，就停止
clear：left/right/both/none 清理浮动

overflow:hidden/visible/scroll/auto

7、块级元素和行级元素
块级元素：（所有的分组分区标签，列表标签）
   宽度充满父元素内容空间，高度为自适应
行级元素：（所有文本格式化标签）
   高宽都是自适应，无法通过width/height来设置高宽
   无法设置上下外边距

8、布局属性
display:
   block
   inline
   inline-block 本身按照行级元素渲染，但内容按照块级元素
   table/inline-table
   table-cell
   none
   list-item
visibility:visible/hidden

9、居中
水平居中
   行级元素：text-align：center
   块级元素：margin-left:auto;margin-right:auto;设置width
垂直居中
   行级元素
       单行文本
           line-height：确定值
       多行文本（块级元素）
   背景图片：
       backround-position:center center
   块级元素:
       父容器：display：table
       子容器：display：table-cell
10、其他样式
cursor:pointer/move/default/wait/text/help
outline:1px solid black;
opacity(不透明度):0-1
clip:rect(0px 50px 200px 0px)

暂无课程目录～

暂无用户评论～

温馨提示

请勿私下交易
请勿在平台外交易。与机构和老师私下交易造成的任何损失及纠纷，腾讯课堂不承担任何责任
听课说明
1、电脑：访问腾讯课堂官网 ke.qq.com 查看我的课表或下载win/mac客户端听课
2、手机/平板：下载腾讯课堂APP, 进入学习页面听课

CSS入门视频教程

你将获得

教学服务

讲师介绍

课程详情