zoukankan      html  css  js  c++  java

  • css简单总结

    /*复习*/
    1.选择器
    标签选择器 ,类选择器,id选择器, 优先级:id选择器>类选择器>标签选择器
    标签选择器
    标签名{}
    id选择器
    #id名{}
    类选择器
    .类名{}
    通配符选择器
    *{} /*选择所有元素 一般用来清除内外边距，便于统一管理和设置*/
    eg:
    *{
    margin: 0px;
    padding: 0px;
    }
    1.内部样式
    <head>
    <style>
    选择器
    h1{
    属性:属性值;
    }
    </style>
    </head>
    2.行内样式 <span style="color:red;"></span>
    3.外部样式 写在:head里面 <link type="text/css" href="相对路径" rel="stylesheet" />
    优先级关系:1>2>3 ? --> 只显示优先级高的 ,不显示优先级低的
    4.绝对路径,相对路径
    2.三种使用方式 文件引入 ,head头处引入,行内引入
    <style>
    </style>

    <a style=""></a>
    3.文本样式 ,字体样式,行样式 text font line (关键字)
    颜色: color:颜色值;
    文本居中,左对齐,右对齐 text-align:center left,right;
    垂直居中:line-heigh:与文本元素高度值一致;
    文本属性(text-)和字体属性(font-)
    1.文本对齐: text-align
    text-align属性规定元素中的文本的水平对齐方式
    属性值：none,center,left,right,justify
    2.文本颜色: color
    text-indent属性规定元素首行缩进的距离，单位建议用em
    3.文本修饰: text-decoration
    text-decoration属性规定文本修饰的样式
    属性值:none(默认),underline(下划线),line-through(横穿文字的线)，inherit(继承父元素的text-decoration属性的值)
    4.行高:如果行高的高度等于盒子的高度，可以是本行文本垂直居中，仅适用单行文本
    line-height：就是行高的意思，指的是一行的高度
    line-height:100px
    行高 line-height:　　
    　　　　 1.针对单行文本垂直居中
    　　　　 针对单行文本垂直居中公式：行高的高度等于盒子的高度，可以使当行文本垂直居中，
    注意只适用单行文本。
    　　　　 2.针对多行文本垂直居中
    　 　行高的高度不能小于字体的大小，不然上下字之间会紧挨一起。
    　　 第一步，一个宽度300*300的盒子，看盒子中一共显示了几行文字，
    假如是5行，再看一下行高，如果行高是line-　　　　　　
    height:30px; 那么就知道行高*5=150px
    　　 第二步，让(盒子的高度-150px)/2=75;
    那么设置盒子的padding-top:75px;
    同时保证盒子的高度为300px,那么高度改为225px;
    字体属性:
    1.字体大小: font-size
    font-size表示设置字体的大小，如果设置成inherit表示继承父元素的字体大小值
    属性值是字体大小
    eg: font-size:100px
    2.字体粗细: font-weight
    font-weight表示设置字体的粗细
    属性值:none(默认值，标准粗细)|bold(粗体)|border(更粗)|lighter(更细)|100-900(设置具体粗细，400等同于normal,700等同于bold)|inherit(继承父元素的字体粗细值)
    3.字体系列: font-family
    font-family:"Microsoft Yahei","微软雅黑","Arial",sans-serif
    如果浏览器不支持第一个字体会尝试下一个字体，直到找到能支持的字体为止
    4.字体样式: font-style
    font-style: 字体;
    eg:导航栏实例 float表示浮动
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
    padding:0;
    margin:0;
    }
    ul{
    list-style: none;
    }
    .nav{
    960px;
    overflow: hidden;
    margin: 0 auto;
    background-color: purple;
    border-radius: 5px;
    }
    .nav ul li{
    float:left;
    160px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    }
    .nav ul li a{
    display: block;
    text-decoration: none;
    160px;
    height: 40px;
    color: white;
    font-size: 20px;
    font-family: "Hanzipen SC"；
    }
    .nav ul li a:hover{
    background: red;
    font-size: 22px;
    text-decoration: underline;
    }

    </style>
    </head>
    <body>
    <div class="nav">
    <ul>
    <li><a href="">导航</a></li>
    <li><a href="">导航</a></li>
    <li><a href="">导航</a></li>
    <li><a href="">导航</a></li>
    <li><a href="">导航</a></li>
    <li><a href="">导航</a></li>
    </ul>
    </div>
    </body>
    </html>

    4.背景样式 背景图片的添加一般在body标签上面添加
    背景颜色:background-color:颜色值;
    背景图片:background-image:url("路径");
    背景图片平铺效果 x轴,y轴,不平铺,默认值是在x,y方向上都平铺(repeat):平铺 <==> 重复出现
    background-repeat: repeat-x; /*x方向上平铺 y方向上平铺 不平铺 x,y方向上都平铺 从父级元素继承*/
    background-repeat: repeat-y;
    background-repeat: no-repeat;
    background-repeat: repeat;
    inherit：规定应该从父元素继承background-repeat属性的设置。
    background-repeat: inherit;
    背景图片定位:background-position:x轴,y轴;
    background-position：属性设置背景图像的起始位置，这个属性设置背景原图像的位置。
    背景图片不随窗口滚动而改变:
    background-attachment: fixed;

    一种简化用法: 属性值顺序随机,想怎末设置就怎末设置
    background:red,url(../img/68AFE76E2C1BE146D0B0E10C3F52E81B.jpg),no-repeat,fixed,
    5.行内元素和块级元素转换 块级元素和行内元素 区分;
    重点 标签分两种等级:行内元素和块级元素
    行内元素:(特点);
    1.与其他元素并排
    2.不能设置宽高,默认宽度是文字的宽度
    块级元素:(特点)
    1.能独占一行
    2.能设置宽高,如果不设置,默认为父级的100%(占满父级标签的宽和高)
    块级元素和行内元素的分类：
    　　在HTML的角度来讲，标签分为：
    　　　　1.文本级标签：p , span , a , b , i , u , em
    　　　　2.容器级标签：div , h系列 , li , dt ,dd
    　　　　p：里面只能放文字和图片和表单元素，p里面不能放h和ul，也不能放p。

    　　从CSS的角度讲，CSS的分类和上面的很像，就p不一样：
    　　　　1.行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级标签，但是是个块级元素。
    　　　　2.块级元素：所有的容器级标签，都是块级元素，以及p标签。
    行内元素和块级元素的转换
    将行内元素转化为块级元素:display:block;
    将块级元素转换为行内元素:dispaly:inline;
    6.盒子模型
    盒子模型 margin(外边距) border(边框) padding(内边距) content(内容) --------- 重点
    盒模型属性: 盒子模型图片见 img/盒子模型图片.png


    1.内容的宽度
    2.height:内容的高度
    3.padding:内边距,边框到内容的距离
    4.border:边框,指的是盒子的宽度(盒子形状的线)
    5.margin:外边距,盒子边框到附近最近盒子的距离
    盒子模型的计算：
    　　1.盒子的真实宽度=width+2*padding+2*border
    　　2.盒子的真是高度=height+2*padding+2*border
    　　3.所以，标准盒模型，width不等于盒子真实宽度，
    如果要保持盒子的真是宽度，那么加padding就一定要减width,减padding就一定要加width。
    真实的高度同样这样设置。
    padding(内边距)：
    　　1.padding：就是内边距的意思，是边框到内容之间的距离。
    　　2.padding的区域是有背景颜色的，并且背景颜色和内容的颜色一样，
    也就是说background-color这个属性将填充border内的所有区域。
    3.padding的设置：
    padding有四个方向，分别描述4个方向的padding。
    　　 1.写小属性，分别设置不同方向的padding
    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
    2，写综合属性，用空格隔开。
    /*上 右 下 左*/
    padding: 20px 30px 40px 50px ;
    /*上 左右 下*/
    padding: 20px 30px 40px;
    /* 上下 左右*/
    padding: 20px 30px;
    /*上下左右*/
    padding: 20px;
    4.一些标签默认有padding:
    比如ul标签，有默认的padding-left值。
    那么我们一般在做站的时候，是要清除页面标签中默认的padding和margin。
    以便于我们更好的去调整元素的位置。
    我们现在初学可以使用通配符选择器
    *{
    padding:0;
    margin:0;
    }
    But，这种方法效率不高。
    所以我们要使用并集选择器来选中页面中应有的标签
    （不同背，因为有人已经给咱们写好了这些清除默认的样式表，reset.css）
    https://meyerweb.com/eric/tools/css/reset/

    border:边框,就是盒子的边框
    1.边框border有3个要素:线宽,线型样式,颜色
    2.如果颜色不写，默认是黑色。如果粗细不写，不显示边框。
    如果只写线性样式，默认的有上下左右 3px的宽度,实体样式，并且黑色的边框。
    用法:
    2.1按照三要素来写border
    border- 3px;
    border-style: solid;
    border-color: blue;
    /*
    border- 5px 10px;
    border-style: solid dotted double dashed;
    border-color: red green yellow;
    */

    2.2按照方向划分：

    border-top- 10px;
    border-top-color: red;
    border-top-style: solid;

    border-right- 10px;
    border-right-color: red;
    border-right-style: solid;

    border-bottom- 10px;
    border-bottom-color: red;
    border-bottom-style: solid;

    border-left- 10px;
    border-left-color: red;
    border-left-style:solid;

    上面12条语句，相当于 bordr: 10px solid red;/*设置边框 粗细，线型，颜色*/

    2.3另外还可以这样：
    border-top: 10px solid red;
    border-right: 10px solid red;
    border-bottom: 10px solid red;
    border-left: 10pxb solid red;
    2.4无边框设置
    border:none；
    border：0；
    表示border没有设置样式
    3.设置圆角边框 border-radius
    border-radius: 10px; /*设置圆角边角 圆的半径*/
    margin:外边距(表示本边框到其他盒子的最近距离);

    margin: 20px auto; 使盒子居中,并且和上边界距离为20px
    margin:像素值 auto; 像素值是距离上边界的 设置元素居中对齐
    条件:此元素必须为块级元素,而且必须有宽高;
    margin:20px,auto; 和上边界距离为20px,元素居中对齐

  • 相关阅读:
    使用vue3.0仿Mac系统的提醒事项做的一个TODO功能
    一些容易忽略的css选择器
    根据node节点生成VNode以及解析成node节点
    jQuery-day02
    jQuery-day01
    初探WebSocket
    Python-如何对字典集合进行排序
    sqlserver获取代理服务作业job的执行情况
    excel中多表汇总
    [javascript][转载]jQuery获取Select选择的Text和 Value
  • 原文地址：https://www.cnblogs.com/nanfengnan/p/14134401.html
Copyright © 2011-2022 走看看