• css的学习


    CSS,全称Cascading style sheets,层叠样式表。
    ====================================================
    1、内联样式,在具体的标签上写样式。
    2、内部样式,在head头里写样式<style type="text/css"></style>
    3、外部样式,引入外部的css文件<link type="text/css" rel="stylesheet" href="demo.css">。
    ======================================================================================
    语法:

    选择器{属性:值}

    选择器的分组,使用逗号分隔。
    示例:h1,h2,h3{font-size:30px;}

    *代表所有元素。
    .代表类选择器。
    #代表Id选择器。

    后代选择器(任意一个后代,可以跨多代),使用空格,示例:
    ul li{color:red;}

    子元素选择器,使用>号,只能找到子元素,示例:
    ul>li{color:red;}

    相邻兄弟选择器,使用+号,示例:
    ul+ol{text-align:center;}

    属性选择器,使用[],示例:
    a[href]{color:pink;}
    a[href="www.baidu.com"]{color:blue;}
    ====================================================================================
    css中的伪类:
    语法:
    选择器:伪类型{样式}

    锚伪类:(未被访问状态、已被访问状态、鼠标悬停状态、活动状态)。
    :link 未被访问的链接添加样式。
    :visited 向已被访问链接添加样式。
    :hover 向鼠标悬停时向元素添加样式。
    :active 向被激活的元素添加样式。
    :focus 向拥有键盘输入焦点的元素添加样式。
    :first-child 向第一个子元素添加样式。

    示例:
    a:link{color:green} //未被点击的链接设置为绿色
    a:visited{color:red} //已被点击的链接设置为红色
    a:active{color:#ccc;}//点击和释放之间的样式
    p:first-child{font-size:20px;}//设置第一个p标签

    ===================================================================================
    css中的文本控制:
    color 设置文本颜色;
    direction 设置文本方向;(ltr 左到右,rtl右到左)
    line-height 设置行高;
    letter-spacing 设置字符间距;
    word-spacing 设置字间距;
    text-indent:缩进首行文本;(可以是正负数)
    text-decoration 向文本添加修饰;(可以在文本下添加下划线、上划线,中划线)
    text-align 对齐元素中的文本;
    text-transform 控制元素中的字母。(可以实现设置单词首字母大写)

    示例:
    a{text-decoration:none}//去掉a链接的下划线
    a{text-transform:capitalize;}//设置文本中的英文单词的首字母大写
    ====================================================================================
    css中的字体控制:
    font-family 定义文本的字体系列(通用系列:Serif、Sans-serif、Monospace、Cursive、Fantasy)。
    font-style 规定斜体文本(normal、italic斜体、oblique倾斜)。
    font-weight 设置文本的粗细(normal、blod、100~900)。
    font-size 设置文本的大小(px/em/%)。
    ============================================================================================
    css中的背景控制:
    background-color 设置元素的背景颜色(三种方式:1、red,2、#ff0000,3、rgb(255,0,0))。
    background-image 设置元素的背景图片。
    background-repeat 设置是否或者如何重复背景图像(repeat/repeat-x/repeat-y/no-repeat)。
    background-position 设置背景图像的起始位置(top、bottom、left、right、center、%、px)。

    示例:
    .list{background-image:url(images/1.png)}
    =========================================================================================
    css中的列表控制:
    list-style-type 设置列表项标记的类型
    (disc默认实心圆/none/circle空心圆/square/decimal数字/...);

    list-style-image 使用图像来替换列表项的标记;
    list-style-position 设置在何处方式列表项的标记;
    list-style 符合写法。

    示例:
    .list{list-style-image:url(images/logo.png);}
    .list{list-style-position:inside;}

    符合写法,多个设置之间用空格隔开,inside是list-style-position的值。
    .list{list-style:url(images/logo.png) inside;}
    =========================================================================================
    css中的链接样式:
    color、font-size、text-decoration、font-family、font-weight...
    :hover伪类
    ==========================================================================================
    css中的表格样式:
    border-style 用于设置元素的边框的样式
    (dotted点状、solid实线、double双线、dashed虚线、...)

    border-collapse 设置是否将表格边框折叠为单一边框(separate、collapse)
    border-spacing 设置相邻单元格的边框间的间距(length length)
    caption-side 设置表格标题的位置(top、bottom)
    text-align 设置水平对齐方式(left、center、right)
    vertical-align 设置垂直对齐方式(top、center、bottom)

    示例:
    边框可以设置一个、二个、三个、四个。
    table{border-style:dotted solid double dashed;}//设置上下左右四个不同的边框

    border-collapse属性会忽略掉border-spacing属性,不能一块用。
    =========================================================================================
    css中的常见伪元素:
    :before 该伪元素定义在元素之前添加内容;
    :after 该伪元素定义在元素之后添加内容;
    :first-line 该伪元素向文本的首行添加特殊样式;
    :first-letter 该伪元素向文本的第一个字母添加特殊样式。
    示例:
    h1:before{content:'hi hello';}//在h1的文本前插入内容
    h1:before{content:url(images/1.png);}//在h1的文本前插入内容
    ========================================================================================
    css的盒模型:
    padding 内边距
    margin 外边距
    border 边框
    element 元素
    ==========================================================================
    css中的边框
    border-style 设置边框的样式;
    border-width 设置边框宽度(thin、medium、thick、length);
    border-color 设置边框颜色;
    border 设置边框属性。

    设置其中一个边框:
    border-top-style、border-bottom-style、border-left-style、border-right-style。
    ======================================================================================

  • 相关阅读:
    POJ 2431 Expedition(探险)
    POJ 3253 Fence Repair(修篱笆)
    POJ 3069 Saruman's Army(萨鲁曼军)
    POJ 3617 Best Cow Line(最佳奶牛队伍)
    [蓝桥杯] 排它平方数
    [蓝桥杯] 小朋友排队
    UVA315 Network 连通图割点
    POJ 1236 Network of Schools 连通图缩点
    poj1061 青蛙的约会
    拓展欧几里
  • 原文地址:https://www.cnblogs.com/gyfluck/p/10097903.html
Copyright © 2020-2023  润新知