CSS入门视频教程

72人 购买 好评度 -
用手机看

扫一扫继续用手机看

  • 微信扫码

  • QQ扫码

下载手机APP
收藏
  • Web前端
更多班级

Web前端

支持随到随学,22年09月过期

¥5.22

本班因教学质量问题暂时不能报名。 查看详情

课程因违反平台规定暂时不能报名。

立即购买

课程概述

目录

往期学员作业()

评论

老师介绍

  • 易大司

    易大司

    大家好,欢迎大家关注我们梦豆学院,我是易老司机!很高兴为大家服务
  • 波老师

    波老师

    Java高级讲师,Java项目经理、熟练使用SSM、SSH、熟悉Java设计模式
简  介 了解CSS样式表,熟练掌握选择器
加入官方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)

* 课程提供者:梦豆学院