码迷,mamicode.com
首页 > Web开发 > 详细

前端 CSS上

时间:2020-10-21 20:41:14      阅读:39      评论:0      收藏:0      [点我收藏+]

标签:消息   文件   中文字符   简写   str   ant   左右   相对   摔跤吧   

1:CSS介绍

1:CSS初始

css一HTML为基础,提供丰富的功能,如字体,颜色背景的控制及配板等

2:CSS样式规则

h1  {
   color:red;
   font_size:25px;
}
1:h1是选择器,用于指定CSS样式作用的HTML对象
2:属性和属性值以“键值对”的形式出现

2:css字体样式属性

字号大小:(font-size)

font-size用于设置字号,一般用像素单位px

 

  <style type="text/css">
    h2 {
      font-size: 34px;
      color: pink;
} </style>

 

字体:(font-family)

font-family属性设置字体,长用字体有宋体,微软雅黑,黑体,

  • 尽量使用默认字体
  • 如果含有  空格  #  $  则需要用英文状态下家单引号或双引号

 

    h2 {
      font-family: "微软雅黑"
      color: pink;
      
    }   

 

字体:(CSS  Unicode)

字体粗细(font-weight)

font-weight属性定义字体的粗细,可用属性值为:normal,bolder,lighter,100-900(100的整数倍,数字400等价位 normal,700等价于 bold,更喜欢用数字来表示)

 span {
        font-weight: 800;  /* 字体的加粗效果 */
    }
strong {
        font-weight: normal;  /* 让加粗的字体不加粗 */
    }

字体分格(font-style设置字体的风格,如倾斜,正常)

 

h4{
        font-size: 16px;
        font-style: italic;  /*  让字体倾斜 */
    }

平时我们很少给字体倾斜,反而喜欢给斜体标签(em,i)改为默认值

font字体的综合设置

 

 h2 {
      /* font-family: "微软雅黑"    *//* 设置字体 */
      color: pink;
      /* font:  font-style   font-weight   font-size/line-height   font-family; */
         font:   italic   bold     30px     "微软雅黑";
      
    }

 

必须按照(font:  font-style   font-weight   font-size/line-height   font-family;)这个顺序;

 

3:CSS基本选择器

要将CSS的样式引用于特别的HTML元素,首先要找到该目标元素。在CSS中,执行这一任务的样式规则部分被成为选择器。

1:标签选择器

标签选择器是指用HTML标签名称作为选择器

2:类选择器

语法:

定义:   .类名{属性1:属性值1;属性2:属性值2;}
调用:   class=类名

 长名字或词组可以使用中横线来选择器命名,不建议使用纯数字或英文字母来表示、

技术图片
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .font14 {
        font-size: 14px;

    }
    .font30 {
        font-size: 30px;
    }
    .pink {
        color: pink;
    }
    .skybule {
        color: skybule;
    }

    </style>
    </head>
<body>
    <div    class="font30  pink">亚瑟</div>
    <div class="font14  skybule">刘备</div>
    <div class="font14    pink">安其拉</div>
    <div  class="font14   skybule">貂蝉</div>
    <div  class="font14   pink">西施</div>
</body>
类选择器

3:谷歌标题案例

 

技术图片
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
     .font36{
         font-size: 100px;
     }
     .syebule { color: skyblue; }
     .red { color: red; }
     .orgle { color: orange; }
     .green { color: green; }
    </style>
</head>
<body>
    <span class="font36  syebule">G</span>
    <span  class="font36  red">o</span>
    <span   class="font36  orgle">o</span>
    <span  class="font36   syebule">g</span>
    <span  class="font36   green">l</span>
    <span  class="font36  red">e</span>
</body>
谷歌图标案例

 

 

 

4:id选择器

 

#id名{属性1:属性值1; 属性2=属性值2;} 

 

技术图片
    <style>
    #big {color: pink;}
    #two {color: yellow;}
    #srong{color: green;}
    </style>
</head>
<body>
    <div id="big">熊大</div>
    <div id="two">熊二</div>
    <div id="strong">光头强</div>
案例

类选择器和id选择器的区别:

类选择器可以重复使用,id选择器相当于身份证号,是唯一的,只允许使用一次

 

5:通配符选择器

 

*{属性1=属性值1;属性2=属性值2}

 

不常用

 

6:链接伪类选择器

  • :link   未访问的连接
  • :visited    以访问的链接
  • :hover    鼠标移动到连接上
  • :active    选定的连接
技术图片
    <style>
    a:link{   /* 未访问的连接 */
        font-size: 20px;
        color: gray;
        font-weight: 700;
    } 
    a:visited{   /* 已访问的连接 */
        font-size: 20px;
        color: orange;
        font-weight: 700;

    }
    a:hover{  /*   鼠标移动到连接上 */
        font-size: 20px;
        color:red;
        font-weight: 900;
    }
    a:active{   /*  选定连接 */
        font-size: 20px;
        color: green;
        font-weight: 900px;
    }
    </style>
</head>
<body>
   <!--  <h2>为类选择器中,连接伪类选择器,主要针对于   a</h2> -->
    <div><a href="#">秒杀</a></div>
    <!-- 注意:他们的顺序一定不能颠倒,按照lvha的顺序,love  hate记忆法 -->
</body>
秒杀案例

注意:他们的顺序一定不能颠倒,按照lvha的顺序,love  hate记忆法

实际工作中。我们只用当鼠标经过的时候的连接伪类选择器,案例如下;其他都不需用

<style>
    a {
        font-size:16px;
        color: gray;
        font-weight: 700;

    }
    a:hover {
        color: red;
    }
    </style>
</head>
<body>
    <div><a href="#">秒杀</a></div>
</body>

7:结构伪类选择器

  • :first-child  :选取器父元素的首个子元素的指定选择器
  • :last-child:     选取属于其父元素的最后一个子元素的指定选择器
  • :nth-child(n):  匹配属于其父元素的第N个子元素,不论元素的类型
  • :nth-last-child(n): 选择器匹配属于其元素的第N个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。

 

技术图片
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    li:first-child {  /* 选择第一个孩子 */
        color: pink;
    }
    li:last-child {   /* 选择最后一个孩子 */
        color: skyblue;
    }
    li:nth-child(4) {  /* 选择第四个孩子,   n  代表第几个的意思 */   
        color: purple;
    }
    li:nth-child(even){
        color: deeppink;   /* 可以选择所有的偶数  even  偶数  的孩子标签 */
    }
    li:nth-child(2n+1) {  /*  n  0  2n   2n+1  3n   可以选择所有的数 */
        color: yellow;     
    }
    </style>
</head>
<body>
    <ul>
        <li>第一个孩子</li>
        <li>第二个孩子</li>
        <li>第三个孩子</li>
        <li>第四个孩子</li>
        <li>第五个孩子</li>
        <li>第六个孩子</li>
        <li>第七个孩子</li>
    </ul>
</body>
结果伪类的选择器

8:目标伪类选择器

 :target目标选择器,可用于选取当前活动的目标元素

<style>
     :target{
         color: red;
         font-size: 30px;

     }
    </style>

4:CSS外观样式及其应用

1:css颜色

 

    <style>
    .red {
        color: red;

    }
    li:nth-child(2) {
        color: #14e6ac;
    }
    </style>
</head>
<body>
    <h3>color属性用于定义颜色,器取值方法有以下的三种</h3>
    <ur>
        <li  class="red">预定的颜色值,如red,green,blue等</li>
        <li>十六进制,如#FF0000,#FF6600,十六进制是最常用的定义颜色的方式</li>
        <li>RGB代码,如红色可以表示rgb(255,0,0)</li>
    </ur>
</body>

 

2:行高,对齐和首行缩进

1:line-height属性用于设置行间距,就是行与行之间的距离,及字体的垂直距离,一般称为行高,

line-height常用的属性值单位有 三种,像素px,相对值em,和百分比。

一般情况,行距比字号大7.8就可以了

2:水平对齐方式

text-align属性用于设置文本内容的水平对齐方式

left:左对齐(默认值)

right:右对齐

center:居中对齐

3:首行缩进

text-indent属性用于设置首行缩进,建议em作为单位

1em是一个字的宽度,如果是汉字宽度,1em就是一个汉字的宽度。

    <style>
    p {
        line-height: 26px;  /* line-height属性用于设置行间距 */
    } 
    h3 {
        text-align: center;   /* text-align属性用于设置文本内容的水平对齐方式 */
    }
    p {
        text-indent: 2em;  /*  text-indent属性用于设置首行缩进,建议em作为单位 */
    }

    </style>

 

3:字间距和单词间距

1:letter-spacing属性用于定义字间距,所谓字间距就是字符与字符之间的空白,其属性值可为不同单位的数值,允许使用负值,默认normal。

2:word-spacing属性用于定义英文单词之间的距离,对中文字符无效。

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        letter-spacing: 3px;
    }
    p{
        word-spacing:  5px;
    }
    </style>
</head>
<body>
    <div>我是熊大</div>
    <p>my name is andy!</p>
</body>

 

4:颜色半透明(css3)

<style>
    h1 {
        color: rgba(0,0,0,0.5);   0~1之间,四个参数不能省略
    }
    </style>
</head>
<body>
    <h1>文字是可以半透明的</h1>
</body>

 

5:文字阴影初始CSS3

text-shadow属性设置阴影,

<style>
    h1 {
        /* color: rgba(0,0,0,0.5); */
        font-size: 100px;
        text-shadow: 5px  12px  3px  rgba(173, 163, 163, 0.5);
        /* text-shadow:  水平位置    垂直位置   模糊距离   影音颜色; */
    }
    </style>
</head>
<body>
    <h1>文字是可以半透明的</h1>
</body>

 

6:submit快捷方式

1:div  tab

2:     div*3

3:ur > p

4:div + p

5:  .demo

5:案例

 

技术图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body {
        color: #3c3c3c;   /* 一般网页默认的颜色 */
    }
    h1 {
        text-align: center;  /* 文字水平居中 */
        font-size: 25px;   
        font-weight: normal;  /* 让加粗的字体不加粗 */
    }
    p {
        text-indent: 2em;  /*  首行缩进 */
        font-size: 14px;
        line-height: 24px;   /* 行间距 */
        letter-spacing: 1px;   /* 定义字间距 */
    }
    div {
        text-align: center;
        font-size:14px;        
    }
    .sport {
        color: #f40;
    }
    .packtake {
        color: #f00;
    }
    .co {
        font-weight: 700
    }
    a:hover {
        color: #f00;
    }
    em {
        font-style: normal;   /* 让倾斜的字体不倾斜 */
        color: skyblue;
    }
    </style>
</head>
<body>
    <h1>中医队赛前突然换帅仍胜伊藤   高原黑马欲阻击舜天</h1>
    <div>2017年07月16日20:11  <span  class="sport">新浪体育 评论中大奖</span> (<a href="#"  class="packtake">11</a>参与) <a href="#">收藏文本</a></div><hr> 
    <p>专题摘要6月19日-7月14日,2017赛季夏季<em>[微博]</em>转会窗口将开放,在中超新政策之下,16支球队又会有怎样的动作,让我们拭目以待。陈子豪决赛轮交出72杆,总成绩-1,并列第33位。黄文义72杆,总成绩+2,并列第43位。吴红富76杆,总成绩+4,并列第49位。元天74杆,总成绩+7,并列第56位。汤榕健和叶剑锋均交出79杆,总成绩+10,并列第69位。杨伊农82杆,总成绩+19,单独第64位</p>
    <p>2017年10月23日 - 2017<em>[微博]</em>佛山公开赛-欧洲挑战巡回赛暨中国男子职业高尔夫巡回赛圆满落幕,中国球手张蕙麟成为赛事历史上唯一一位两次获得这一奖项的球员。新浪体育 | 2017年10月23日 08...</p>
    <p>北京时间10月22日消息。2017<<em>[微博]</em>佛山公开赛今日在佛山高尔夫俱乐部落下战幕。威尔士球手奥利弗-法尔(Oliver Farr)五杆优势大胜,赢得个人第二座欧巡挑战赛冠军。张蕙麟在中国球手中表现最佳,获得并列第6位。手握五杆优势出发的法尔今日打出5只小鸟,吞下两记柏忌,打出低于标准杆3杆的69杆,总成绩270杆(-18,69-66-66-69),最终守住五杆巨大领先,继2014年土航挑战赛后再度问鼎欧巡挑战赛冠军。本场比赛冠军,让法尔获得了8万美元的冠军奖金。</p>
     
   
 
</body>
</html>
小案例

 

6:标签显示模式(css的显示模式,即书写位置)

1:行内样式(内联样式)

 

<标签名   style="属性1:属性值;属性2:属性值">内容</标签>

 

2:内部样式(内嵌样式)

 

<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
选择器 {

}
</style>
</head>

 

 

3:外部样式(外链式)

连入式是将所有的样式放在以css为扩展名的外部样式表文件中。

 

<link rel="stylesheet"  tyle="text/css" href="css文件路劲"  />

 

-href:  定义所连接外部样式表的URL,

-tyle:  定义所连接文档的类型在这里指定为"text/css",表示连接的外部文件为css.

-rel:  定义当前文档与连接文档之间的关系,在这里指定"stylesheet"  表示被连接的文档是一个样式表文件

 

 

技术图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet"  type="text/css" href="text.css"  >
</head>
<body>
    <div  class="demo">连入式是将所有的样式放在以css为扩展名的外部样式表文件中。</div>
    <div>连入式是将所有的样式放在以css为扩展名的外部样式表文件中。</div>
    <div>连入式是将所有的样式放在以css为扩展名的外部样式表文件中。</div>
</body>
</html>
HTML

 

技术图片
.demo {
    font-size: 20px;
    color: pink;
}
css

 

4:块级标签显示模式

每个块级元素独自占据一整行或多整行,可以对其设置宽度,高度,对齐属性,长用于网页布局和网页结构的搭建。

 

技术图片
<h1>-<h6>,<p>,<div>,<ul>,<ol>,<li>等,其中<div>是典型的块元素
View Code

 

特点:

  1. 总是从新行开始
  2. 高度,行高,外边距,以及内边距都可以控制
  3. 宽度是默认的1
  4. 可以容纳内联元素和其他块及元素

 

5:行内标签显示模式

行内元素不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度,高度,对齐等属性,常用于控制页面中的文本样式。

 

常见的行内元素有 <a>,<strong>,<b>,<em,>,<i>,<del>,<s>,<ins>,<span>,其中<span>是典型的行内元素。

 

  1. 和另行的元素在一行上,
  2. 高宽无效,但水平方向的padding和margin可以设置,垂直方向无效
  3. 默认快读就是他本身内容的宽度
  4. 行内元素只能容纳文本。a除外

 

6:行内块元素

行内元素——<img/>,<input/>,<td/>可以给他们设置宽高和对齐属性

7:显示模式转换

 

技术图片
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 100px;
        height: 100px;
        background-color: pink;
        display: inline;   /* 块级标签转换为行内标签 */
    }
    span {
        width: 100px;
        height: 100px;
        background-color: hotpink;
        display: block;   /* 行内标签转换为块及标签 */
    }
    </style>
</head>
<body>
    <div>123</div>
    <div>456</div>
    <div>789</div>
    <span>abc</span>
    <span>efg</span>
    <span>hij</span>
</body>
显示模式的转换

 

 

 

7:CSS复合选择器

1:CSS书写规范

  • 空格规范
  • 选择器规范
  • 属性规范

2:交集选择器

 

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .singer {  /* 类选择器 */
        color: #f00;
    }
    div.singer {   /* 由两个选择器构成,其中第一个为标签选择器,第二个为类选择器,
        交集选择器,是并且的意思。即……又……的意思,既是singer 又是div  满足的条件,用的比较少。 */
        font-weight: 700;
    }
    </style>
    
</head>
<body>
    <div class="singer">刘德华</div>
    <div class="singer">张学友</div>
    <p  class="singer">汪峰</p>
    <p class="singer">韩红</p>

 

3:并集选择器

 

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    p,div,h1,.yao { /*  并集选择器,包括任何形式的选择器(标签选择器,类选择器,id选择器,都可以是并集选择器的一部分) */
        color: #0f0; /* 他们都是绿色的 */ 
    }
    </style>
</head>
<body>
    <p>香蕉</p>
    <p>橘子</p>
    <div>大白菜</div>
    <div>辣椒</div>
    <h1>米饭</h1>
    <h1>白面</h1>
    <em  class="yao">我也要变色</em><br>
    <em>我不要变色</em><br>
    <em>我不要变色</em><br>
</body>

 

 

4:子元素选择器

用来选择元素或元素的后代,其写法是吧外层的标签写在外面,内层标签写在里面,中间用空壳隔开。当标签发生嵌套是,内标签就称为了外层标签的后代。

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div ul li {  
        color: red; /*  让div里面的ul里面的li为红色 */
    }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li>首页</li>
            <li>导航</li>
            <li>联系</li>
        </ul>
    </div>
    <ul>
        <li>百度</li>
        <li>新浪</li>
        <li>搜狐</li>
    </ul>
</body>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .item li {  /* 所有的后代选择器 */
        color: #f00;
    }
    .item>li {   /* 子元素选择器(亲儿子) */
        color: #0f0;
    }
    </style>
</head>
<body>
    <ul  class="item">
        <li>一级菜单
            <ul>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单
            <ul>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单
            <ul>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
    </ul>
</body>

 

5:测试选择器

 

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
     /* 登录为红色 */
    .site-r a { 
        color: red;
    }
    /* 主导航栏里所有的连接为蓝色 */
    .nav ul li a { /* 子元素选择器  */
        color: skyblue;
    }
    /* 主导航栏和侧导航栏里面所有的文字都是14px,并且是微软雅黑 */
    .nav,.sitenav {
        /* font-size: 14px; */
        font: 14px  "microsoft yahei";
    }
    /* 主导航栏里面的一级菜单连接文字是绿色 */
    .nav>ul>li>a {
        color: green;
    }
    </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>
        <ul>
            <li><a href="#">公司邮箱</a></li>
            <li><a href="#">公司电话</a></li>
        </ul>
        </li>
    </ul>
    </div>
    <div class="sitenav">
        <div  class="site-1">左侧导航栏</div>
        <div  class="site-r"><a href="#">登录</a></div>
    </div>
</body>
</html>

 

 

 

6:属性选择器

 

    <style>
    /* 属性选择器中用中括号来表示 */
    a[title] {  /* 存在属性即可 */
        color: red;
    }
    input[type=text] { /* 属性的值完全等于 */
        color: red; 
    }
    div[class^=font] {  /* 表示以font开始就好了 */
        color: pink;
    }
    div[class$=footer] {  /* 表示以footer结尾就行 */
        color: skyblue;
    }
    div[class*=tao] {  /* 表示任意位置有tao就能匹配上 */
        color: green;
    }
    </style>

 

技术图片
<body>
    <a href="#" title="我是一个百度">百度</a><br>
    <a href="#" title="我是一个新浪">新浪</a><br>
    <a href="#">搜狐</a><br>
    <a href="#">网易</a><br>
    <a href="#">土豆</a><br>
    <input type="text" value="文本框"><br>
    <input type="text" value="文本框"><br>
    <input type="text" value="文本框"><br>
    <input type="submit"><br>
    <input type="submit"><br>
    <input type="submit"><br>
    <input type="reset"><br>
    <input type="reset"><br>
    <input type="reset"><br>
    <div class="font12">属性选择器</div>
    <div class="font12">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="sub-footer">属性选择器</div>
    <div class="jd-footer">属性选择器</div>
    <div class="new-jd-nav">属性选择器</div>
    <div class="new-jd-nav">属性选择器</div>
    <div class="tao-footer">属性选择器</div>
    <div class="new-tao-nav">属性选择器</div>
    <div class="new-tao">属性选择器</div>
    
</body>
上面的HTML

 

 

7:伪元素选择器

 

<style>
    /* 
    .demo 类选择器
    :first-child  伪类选择器
    ::first-letter 伪元素选择器
     */
    p::first-letter {  /* 选择器中的第一个字 */
        color: red;
        font-size: 50px;
    }
    p::first-line {  /* 文本的第一行 */
        color: green;
    }
    p::selection {  /*  当我们选中文字的时候可以变化的样式 */
        color: pink;
    }
    div::before {    /* before 和 after 在盒子div的内部的前面插入或者后面插入 */
        content:"俺";
    }
    div::after {
        content:"18岁";
    }
    </style>

 

技术图片
<body>
<h1>freestyle</h1>
    <p>英语词汇,一般指即兴的、随性的随意的发挥,例如HIPHOP说唱中的freestyle就是即兴说唱的意思。2017年6月,因吴亦凡在国产说唱综艺《中国有嘻哈》中屡次提起freestyle而火遍网络。
2017年12月18日,“你有freestyle吗?”入选国家语言资源监测与研究中心发布的2017年度十大网络用语”。
2017年6月,吴亦凡作为中国有嘻哈制作人身份在海选70强环节对个别因紧张而表演不够充分的选手给予机会时说的抄:“有Freestyle吗?”因吴亦凡出色的外形和超高人气,一夜之间“Freestyle”爆红网络。微信搜索指数500%刷爆,一瞬间,微博、朋友圈都刮起2017最酷最炫吴亦凡的Freestyle。网友制作各种表情包:你不会Freestyle,不配和我做朋友等等。</p>
<div>今年</div>
</body>
上面的HTML代码

 

 

8:CSS背景及其应用

1:背景颜色图片及其平铺

    div {
         width: 700px;
         height: 800px;
         background-color: pink;  /* 背景颜色 */
         background-image: url(images/L.jpg); /* 背景图片,下载下来才能生效 */ 
         background-repeat: no-repeat;   /* 是否平铺,不平铺  */
         /*background-repeat: repeat-x;    水平平铺 */
         /*background-repeat: repeat-y;       垂直平铺 */
    }
    </style>
    
</head>
<body>
    <div>
    </div>

2:背景位置

 语法:

background-position:  length || length  百分数
background-position:  top|center|bottom|left|right;(上,中,下,左,右)

注意:

1:position  后面是x坐标和y坐标,可以使用防伪名词或者精确单位

实际工作中用的最多的是中对齐了

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
         width: 700px;
         height: 800px;
         background-color: pink;  /* 背景颜色 */
         background-image: url(images/L.jpg); /* 背景图片,下载下来才能生效 */ 
         background-repeat: no-repeat;   /* 是否平铺,不平铺  */
         /*background-repeat: repeat-x;    水平平铺 */
         /*background-repeat: repeat-y;       垂直平铺 */
         /* 1:利用名词方位 */
         /* background-position: left  top;  默认是  左上角 */
         /* background-position: right top;     右上角 */
         /* background-position:  bottom  center;   中下*/ 
         /* background-position: center   center; 方位名词没有顺序,谁都可以在前 */
          /*background-position: left ;  如果方位名词只有一个,另一个默认center */
          /*background-position: 10px  10px; 
          2:  精确单位,第一个值一定是x值,第二个值一定是y值 */
         /*  3:混搭   前面是水平  后面是垂直*/
         background-position: 10px  center ;
    }
    </style>
    
</head>
<body>
    <div>
    </div>
</body>

3:背景附着

语法:

backgroud-attachment: scroll | fixed
参数:
scroll:背景图片是随对象的容滚动
fixed:背景图片滚动
说明:
设置或检索背景图像是随对象内容滚动还是固定
<style>
    body {
        background-color: #000;  /* 背景为黑色 */
        background-image: url(images/ms.jpg);
        background-repeat: no-repeat; 
        background-size: 1000px;
        background-position: center -25;
        background-attachment: fixed ; /* 默认是 srcoll 滚走的 */
    }
    p {
        color: white;
        font-size: 30px;
    }
    </style>

 

4:背景简写

backgroup:背景颜色   背景图片地址   背景平铺   背景滚动   背景位置

 

5:背景半透明

语法:

background: rgba(0,0,0,0.3);

最后一个参数是alpha 透明度   取值范围0-1 之间

注意:背景半透明是值盒子背景半透明,盒子里面的内容不收影响

同样,可以给文字边框透明,都是rgba的格式来写。

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body {
        background: #ccc url(images/L.jpg)  no-repeat  top  center;
    }
    div {
        height: 400px;
        background: rgba(0,0,0,0.3);
    }
    </style>
</head>
<body>
    <div></div>
</body>

 

6:背景缩放

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body {
        background-color: skyblue;
    }
    div {
        width: 800px;
        height: 800px;
        background: hotpink  url(images/L.jpg) no-repeat ;
        /*background-size: 500px ;   我们尽量改一个值,防止是真扭曲
         */
        /*background-size: 50% ;   把图片缩放为源一般的大小 */

        /* background-size: cover ;  自动调整图片的大小,保证图片始终充满背景区域,如果溢出的部分会影藏 */
         background-size: contain;
         /* 会自动调整缩放比例,保证图片始终完整的显示在背景区域 ,图片进行等比例缩放*/
    }
    </style>
</head>
<body>
    <div></div>

 

7:多背景图片

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 800px;
        height: 800px;
        background: url(images/pig.jpg) no-repeat  left top,
        url(images/ms.jpg) no-repeat  right bottom hotpink;
        /* 为了防止背景色将图片盖住,吧背景色放在最后一组 */
    }
    </style>
</head>
<body>
    <div></div>
</body>

 

8:凹凸文字效果

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body {
        background-color: #ccc;
    }
    div {
        color: #ccc;
        font:700  80px  "微软雅黑";
    }
    div:first-child {
        /* text-shadow: 水平位置  垂直位置   模糊距离  阴影颜色; */
        text-shadow: 1px 1px 1px #000,-1px -1px 1px #fff;
    }
    div:last-child {
        text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
    }
    </style>
</head>
<body>
    <div>我是凸起的文字</div>
    <div>我是凹下的文字</div>
</body>

 

9:王者荣耀导航栏

文本的装饰:

text-decoration  通常我们给链接修改装饰效果

描述
none  默认,定义标准的文本
underline 定义文本下的一条线
overline 定义文本上的一条线
line-through 定义闯过文本的一条线

 

 

技术图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body {
        background-color: #000;
    }
    a {
        width: 200px;
        height: 50px;
        /* background-color: orange; */
        display: inline-block;
        text-align: center;  /* 水平居中 */
        line-height: 50px; /* 行高等于盒子的高度,为垂直居中 */
        color:#fff;  /* 设置为白色 */
        font-size:22px;
        text-decoration: none;   /* 取消下划线,文本装饰线 */
    }
    a:hover {
        background: url(images/h.jpg)  no-repeat ;
    }    

    </style>
</head>
<body>
    <a href="#">专区说明</a>
    <a href="#">申请资格</a>
    <a href="#">兑换奖励</a>
    <a href="#">下载游戏</a>
</body>
</html>
View Code

 

 

 

9:CSS三大特性

1:层叠性

一般情况下,出现样式冲突,则会按照css的书写顺序,以最后的样式为准

2:css继承性

子标签会继承父标签的某些样式,如文本,字号。

并不是所有的css属性都可以继承,例如:下面的属性是不具有继承,边框,外边框,内边框,背景,定位,元素高属性

3:css的优先级

标签 0,0,0,1
类,伪类 0,0,1,0
ID的贡献值 0,1,0,0,
行内样式的贡献值 1,0,0,0
每个limportant的贡献值 无穷大

 

4:继承的权重为0

无论父标签的权重有多大,继承过来的权重总是为0.

两个权重相同时,遵循就近原则。

权重相加不进制的

5:css权重的6道精华题

10:CSS盒模型及应用

1:网页布局的本质

吧网页元素比如 文字图片  等等,放在盒子里面,然后利用css摆放盒子的过程,就是网页布局。

2:盒子模型的组成

边框,

3:盒子边框

边框:     边框的粗细  ||  边框的风格   ||   边框颜色

border: border-width    border-style   broder-color

边框的样式(border-style),常用属性值如下:

none:没有边框及忽略所有边框的宽度
solid:边框为单实线,
dashed:虚线
dotted:点线
double:双实现
<head>
    <meta charset="UTF-8">
    <title>    </title>
    <style>    
    div {
        width: 500px;    
        height: 500px;    
        border-width:     2px;
        border-color:     pink;
        border-style:     solid;    
    }
    </style>
</head>
<body>
    <div>我是一个盒子</div>
</body>

 

 

4:盒子边框的综合写法

<head>
    <meta charset="UTF-8">
    <title>    </title>
    <style>    
    input {
        border: 0;

    }
     .user {
       border-width: 1px;
       border-color: pink;
       border-style: solid;    

     }
     .nc {
         border-top-width: 1px;
         border-top-color: hotpink;
         border-top-style: solid;
         border-bottom-width: 1px;
         border-bottom-color: hotpink;
         border-bottom-style: solid;
     }
     .email {
        border-top: 1px solid  red ; /*  宽度  样式  颜色 */
        border-bottom: 1px solid red;   
     }
     .tel {
         border: 2px solid skyblue;
     }
    </style>
</head>
<body>
    用户名:<input type="text" class="user" ><br><br>    
    昵  称:<input type="text" class="    nc"><br><br>    
    邮  箱:<input type="text"  class="email"><br><br>
    手  机:<input type="text"  class="tel"><br><br>    
</body>

 5:合并细线表格

    <style>
    table {
        width: 700px;
        height: 500px;
        border: 1px solid  red ;
        border-collapse: collapse; /* 表示边框合并在一起  显示成细线*/
    }
    td {
        border: 1px solid  red
    }
    </style>
技术图片
<body>
    <table  cellspacing="0"  cellspacing="0">
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
    </table>
</body>
html

 

6:圆角矩形

语法格式:

border-radius:左上角   右上角     右下角    左下角;
    <style>
    div {
        width: 200px;
        height: 200px;
        border: 1px solid  red;
    }
    div:first-child {  /*  连接伪类选择器  选亲兄弟 */
        border-radius: 10px;  /* 一个数值可以表示4个角都是相同的 10 px 的弧度 */
    }
    div:nth-child(2) {
        /*border-radius:100px;   去宽度和高度的一般会变成一个园 */
        border-radius:50%;
    }
    div:nth-child(3) {
        border-radius: 20px 60px; /*  对角线 */
    }
    div:nth-child(4) {
        border-radius: 10px 40px 80px;  /* 顺时针  左下角40px,好像是对角线*/
    }
    div:nth-child(5) {
        border-radius: 10px 40px 80px 100px;  /* 顺时针 */
    }
    div:nth-child(6) {
        border-radius: 100px;/* 去宽度和高度的一般 */
        height: 100px;  /* 高度放低会变成一个椭圆 */
    }
    div:nth-child(7) {
        border-radius: 100px 0;
    }

    </style>

 

7:盒子内边距

padding属性设置内边距

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        /* padding-left: 20px;  做内边距
        padding-top: 30px;      上内边距*/
        /*padding: 20px;   写一个值表示上下左右都是20像素 */
        /*padding: 10px  20px;   上下10  左右20  */
        padding: 10px 20px 30px 40px; /* 顺时针  上右下左 */
    }
    </style>
</head>
<body>
    <div>盒子的内边距就是内容和边框的距离</div>
</body>

 

8:firework测量工具

 

9:新浪导航栏

技术图片
!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    nav {
        height: 41px;
        background-color: #FCFCFC;
        border-top: 3px solid  #FF8500;
        border-bottom: 1px solid  #EDEEF0;
    }
    nav a {
        font-size: 14px;
        color: #4c4c4c;
        text-decoration: none;  /* 取消下滑县 */
        padding: 0 15px;   /* 上下是0  左右是15 */
        height: 41px;
        line-height: 41px;
        display:inline-block;
    }
    nav a:hover {
        background-color: #eee;
    }
    </style>
</head>
<body>
    <nav>
    <a href="#">首页</a>
    <a href="#">手机新浪网</a>
    <a href="#">网站导航</a>
    <a href="#">三个字</a>
    </nav>
</body>
</html>
新浪导航栏

10:外边距以及盒子居中对齐

margin属性用于设置外边距,

    <style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        /* margin-top: 100px; 上右边距
        margin-left: 50px;  左右边距 */
        margin: 30px auto;   /* 上下30,左右auto,这样可以是块及带有宽度的盒子水平居中 */
        padding: 4px;  /* 内边距4像素 */
    }
    </style>

 

11:文字,盒子居中及图片和背景的区别

 

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 300px;
        height: 100px;
        border: 1px solid pink;
        text-align: center; /*  文字水平居中 */
        margin: 10px auto;    /* 盒子水平居中 */
    }
    section {
        width: 400px;
        height: 400px;
        border: 1px solid #000;
        background: blue url(images/ms.jpg)   no-repeat;
        background-position: 30px  50px;  /* 更改图片的位置 */
        background-size: 400px 400px ;    /* 更改图片的大小 */
        

    }
    section img {
        width: 200px;
        height: 210px;
        margin-top: 30px;  /*  插入图片可用 margin 或padding */
        margin-left: 50px; /*  插入的图片是一个盒子 */
       /*  3:一般情况下,背景图片适合做一些小图标;
       产品之类的就使用插图图片 */
    }

    </style>
</head>
<body>
    1:文字水平居中和盒子水平居中
    <div>文字水平居中</div>
    2:插入图片和背景图片
    <section>
        <img src="images/L.jpg" alt="">
    </section>
</body>

 

 

 

12:清除内外的边距

为了是各个浏览器中网页的兼容性,可以清楚元素的内外边

 

* {
passing: 0;  清楚内边距
margin: 0;   清楚外边距
}

 

 

 

13:行内元素上下内外边距的问题

 

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    span {
        background-color: pink;
        margin: 80px 50px;  /* 上下30  左右50 */
        /* 行内元素是只有左右边距 没有上下边距 */
    }
    </style>
</head>
<body>
    <span>我是行内元素</span>
</body>

 

 

 

14:外边距合并

 

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
    div:first-child {
        margin-bottom: 100px;

    }
    div:last-child {
        background-color: purple;
        margin-top: 50px;

    }
    /* 外边距合并  垂直的块及盒子  以最大的外边距为准 
    解决办法,值设置一个值就可以了。
    */
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>

 

嵌套块元素垂直外边距的合并

父元素没有上内边距及边框,则父元素的上外边距与子元素的上外边距发生合并

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .father {
        width: 300px;
        height: 300px;
        background-color: pink;
        margin-top: 100px;  /* 当两个盒子嵌套的时候回发生重合 */
        /* border: 1px solid red;  解决办法1:给父元素定义1像素的上边框 */
        /* padding-top: 1px ;  解决办法二:给父元素定义1像素的内边框 */
        overflow: hidden;   /* 解决方案三 */
    }
    .son {
        width: 200px;
        height: 200px;
        background-color: purple;
        margin-top: 30px;
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

 

 

15:盒子计算尺寸

空间尺寸=width+border+padding+margin

实际尺寸= width+border+padding

16:padding不影响盒子大小的情况

如果一个盒子没有指定宽度/高度或者继承父亲的宽度/高度,则padding不会影响盒子的大小

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        height: 30px;
        border: 1px solid red ;
        padding-top: 10px;
        padding-left: 20px;  /* #因为盒子没有宽度,所以padding不会影响盒子宽度
         */
    }
    nav {
        width: 300px;
        height: 40px;
        border: 1px solid pink;
    }
    p {  /* p没有指定宽度,则默认和父亲元素一样宽, */
        height: 20px;
        background-color: hotpink;
        padding-left: 30px;  /* 此时padding也不会影响盒子的宽度 */
    }
    </style>
</head>
<body>
    <div>奔跑吧,兄弟</div>
    <nav>
        <p>摔跤吧,爸爸</p>
    </nav>
</body>

 

17:搜索趣图

 

技术图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    ul {
        list-style: none;  /* 取消列表自带的小点 */
    }
    .searchPic {  /* 大盒子 */
        width: 238px;
        height: 294px;
        border: 1px solid #D9E0EE;
        border-top: 3px solid #FF8400;
        margin:100px;
    }
    .searchPic h3 {
        height: 35px;
        line-height: 35px;
        border-bottom: 1px solid #D9E0EE;
        font-size: 16px;
        font-weight: normal;
        /* background-color: #ccc; */
        padding-left: 12px; /* 这个没有宽度,继承了父亲的宽度 */
    } 
    .searchPic img {
        margin: 7px 0 0 8px;
    }
    .searchPic ul li a {
        font-size: 12px;
        color: #666;
        text-decoration: none; /*  取消下划线 */

    }
    .searchPic ul {
        margin-left: 8px;
    }
    .searchPic ul li {
        padding-left: 10px;
        height: 26px;
        line-height: 26px;
        background: url(images/h.jpg) left center no-repeat; 

         background-size: 5px 5px; 
    }
    .searchPic ul li a:hover {
        text-decoration: underline;  /* 添加下划线 */
        color: #ff8400;
    }
    </style>
</head>
<body>
    <div class="searchPic">
        <h3>搜索趣图</h3>
        <img src="images/happy.jpg" height="160"  alt="">
        <ul>
            <li><a href="#">小胖墩有用被卡,被救后一脸无辜</a></li>
            <li><a href="#">小胖墩有用被卡,被救后一脸无辜</a></li>
            <li><a href="#">小胖墩有用被卡,被救后一脸无辜</a></li>
        </ul>
    </div>
</body>
</html>
搜索趣图

 

 

 

18:盒子模型布局稳定性

稳定性:

width > padding > margin

原因

  1. margin   外边距合并   ie6以下margin 加倍
  2. padding 加减计算
  3. width  没有问题  我们经常使用宽度剩余法来做或高度剩余法来做

19: css3 盒模型

盒模型有两种:

  1. w3c的标准:box-sizing:content-box    盒子的大小为 width+padding+border
  2. box-sizing:border-box   盒子的大小是width

20:盒子阴影

 

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    h1 {
        font-size: 100px;
        text-shadow:  3px 3px 3px rgba(0, 0, 0, 0.7);
    }
    div {
        width: 200px;
        height: 200px;
        border: 10px solid red;
        /* box-shadow: 水平位置  垂直位置  模糊距离  阴影尺寸  阴影颜色  内外阴影 */
        box-shadow: 5px 5px  3px 4px  rgba(0, 0, 0, 0.5);
    }
    </style>
</head>
<body>
    <h1>稳住。我们能赢</h1>
    <div></div>
</body>

 

 

 

21:水晶图片案例

 

技术图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 240px;
        height: 240px;
        line-height: 240px;
        background-color: pink;
        margin: 100px;
        background:  url(images/shui.jpg)  no-repeat;
        font-size: 30px;
        text-align: center;
        color: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        box-shadow: 5px 5px 10px 16px rgba(255, 255, 255, 0.8) inset;
    }
    </style>
</head>
<body>
    <div>水晶图片</div>
</body>
</html>
水晶图片

 

 

 

 

 

前端 CSS上

标签:消息   文件   中文字符   简写   str   ant   左右   相对   摔跤吧   

原文地址:https://www.cnblogs.com/1164xiepei-qi/p/11183927.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!