zoukankan      html  css  js  c++  java
  • CSS基础知识学习笔记

    1.css基本样式讲解

    1.1 css背景
    background-attachment:背景图像是否固定或者随着页面的其余部分滚动
    background-color:设置元素的背景颜色
    background-image:把图片设置为背景
    background-position:设置背景图片的起始位置
    background-repeat:设置背景图片是否及如何重复
    background-size:规定背景图片的尺寸
    background-orgin:规定图片的定位区域
    background-clip:规定背景的绘制区域
    1.2 css文本
    color :文本颜色
    direction :文本方向
    line-height :行高
    letter-spacing: 字符间距
    text-align :对齐元素
    text-decoration :向文本添加修饰
    text-indent :缩进元素中文本首行
    text-transform :元素中的字母
    unicode-bidi :设置文本方向
    white-space :元素中空白的处理方式
    word-spacing :字间距
    text-wrap:自动换行
    text-shadow:向文本添加阴影
    1.3 css字体
    font-family :设置字体系列
    font-size :设置字体尺寸
    font-style :设置字体风格
    fongt-variant: 以小型大写字体或正常字体显示文本
    font-weight: 设置字体的粗细
    1.4 css链接
    a:link 普通的、未被访问的链接
    a:visited 用户已经访问的链接
    a:hover 鼠标指针位于链接的上方
    a:active 链接被点击的时刻
    text-decoration:这个属性大多用于去掉链接中的下划线
    background-color:背景颜色
    1.5 css列表
    CSS列表属性可以灵活的放置、改变标志,或者将图像作为列表项标志
    list-style :简写列表项
    list-style-image :列表项图像
    list-style-position: 列表项标志位置
    list-style-type :列表类型
    1.6 css表格
    表格边框:

    #tb,th,td,tr{
        border: 1px solid blue;
    }

    折叠边框:

    #tb{
        border-collapse: collapse;
    }

    1.7 css轮廓
    outline :设置轮廓属性
    outline-color :设置轮廓的颜色
    outline-style :设置轮廓的样式
    outline-width :设置轮廓的宽度

    2.css盒子模型

    内边距:
    内容外部,边框内部
    padding 设置所有边距
    padding-bottom、left、right、top 单独设置某个方向的边距
    边框:
    可以创建出效果出色的边框,并且可以用于任何元素
    border-style:定义了10种样式
    border-(top,bottom,left,right)-style:定义单边样式
    border-width:边框宽度设置
    border-(top,bottom,right,left)-width 单边框宽度
    border-color 边框颜色
    border-(top,left,bottom,right)-color 单边框颜色
    CSS3边框
    border-radius 圆角边框
    box-shadow 边框阴影
    border-image 边框图片
    外边距:
    margin 整体外边距
    margin-(top,bottom,left,right) 单边外边距
    外边距合并:就是一个叠加的概念

    3.css定位与浮动

    css定位:
    position:static、relative、absolute、fixed;
    top
    left
    right
    bottom
    overflow
    ….
    css浮动:
    float属性:left,right,none,inherit
    clear属性:去掉浮动属性
    left,right:去掉左右浮动
    both:左右两侧浮动均去掉
    inherit:从父级继承来clear值

    4.css选择器

    派生选择器:

    li strong{
        color:red;
    }

    具体制定列表项里的strong标签效果,已经被定义好的效果是不会被覆盖。

    id选择器:

    #id {
        color:red;
    }

    id选择器可以和派生选择器组合使用,id选择器不好与id组合使用

    类选择器:

    .pclass{
        color:red;
    }

    类选择器也可以和派生选择器进行组合使用

    属性选择器:
    缺省属性选择器:

    [title]{
        color:red;
    }   

    带名字的属性选择器:

    [title=te]{
        color:red;
    }

    在IE6及更低版本,不支持属性选择器
    属性选择器必须完全匹配才会起作用

    子元素选择器:
    采用>符号,只是只能用一级一级定位

    相邻兄弟选择器:
    标签+标签的形式,这个只要做一个简单的了解即可

  • 相关阅读:
    c#隐藏和重写基类方法的区别
    c#事件(续委托之后)
    c# 中接口和抽象类的区别
    call 和apply 的一个记录
    string 和 stringbuilder 的区别
    传值和传引用
    值类型和引用类型
    标签选择器与字体连写
    input表单案例
    codeforces 676B B. Pyramid of Glasses(模拟)
  • 原文地址:https://www.cnblogs.com/good10001/p/4747281.html
Copyright © 2011-2022 走看看