精华内容
下载资源
问答
  • 本章大家介绍CSS中Table(表格)样式如何设置?(代码实例)。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。一、表格边框border 指定CSS表格边框,使用border属性。下面的例子指定了一个表格的Th...

    本章给大家介绍CSS中Table(表格)样式是如何设置?(代码实例)。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    一、表格边框

    border 指定CSS表格边框,使用border属性。

    下面的例子指定了一个表格的Th和TD元素的黑色边框:table, th, td

    {

    border: 1px solid black;

    }

    请注意,在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。

    为了显示一个表的单个边框,使用 border-collapse属性。

    二、折叠边框

    border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开:table

    {

    border-collapse:collapse;

    }

    table,th, td

    {

    border: 1px solid black;

    }

    三、表格宽度和高度

    Width和height属性定义表格的宽度和高度。

    下面的例子是设置100%的宽度,50像素的th元素的高度的表格:table {width:100%;}

    th{height:50px;}

    四、表格文字对齐

    表格中的文本对齐和垂直对齐属性。

    text-align属性设置水平对齐方式,像左,右,或中心:td{text-align:right;}

    vertical-align 垂直对齐属性设置垂直对齐,比如顶部,底部或中间:td{

    height:50px;

    vertical-align:bottom;

    }

    五、表格填充

    padding 如果在表的内容中控制空格之间的边框,应使用td和th元素的填充属性:td{padding:15px;}

    六、表格颜色

    下面的例子指定边框的颜色,和th元素的文本和背景颜色:table, td, th { border:1px solid green; }

    th { background-color:green; color:white; }

    七、示例

    CSS教程

    #customers

    {

    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

    width:100%;

    border-collapse:collapse;

    }

    #customers td, #customers th

    {

    font-size:1em;

    border:1px solid #98bf21;

    padding:3px 7px 2px 7px;

    }

    #customers th

    {

    font-size:1.1em;

    text-align:left;

    padding-top:5px;

    padding-bottom:4px;

    background-color:#A7C942;

    color:#ffffff;

    }

    #customers tr.alt td

    {

    color:#000000;

    background-color:#EAF2D3;

    }

    CompanyContactCountry
    Alfreds FutterkisteMaria AndersGermany
    Berglunds snabbköpChristina BerglundSweden
    Centro comercial MoctezumaFrancisco ChangMexico
    Ernst HandelRoland MendelAustria
    Island TradingHelen BennettUK
    Königlich EssenPhilip CramerGermany
    Laughing Bacchus WinecellarsYoshi TannamuriCanada
    Magazzini Alimentari RiunitiGiovanni RovelliItaly
    North/SouthSimon CrowtherUK
    Paris spécialitésMarie BertrandFrance

    效果图:

    75fa5c970345aac46e5325711cd94213.png

    展开全文
  • 本文节选自“语雀”私有付费专栏「前端一万小时 | 从零基础到轻松就业」❗️❗️❗️以下链接为本文最新勘误篇章——《CSS 盒子、背景、链接、列表、表单、表格等加样式》1. 让一个元素“看不见”有几种方式?有...

    57f9305d14c6ced84ad807a5f4f0862a.png
    原创:itsOli  @前端一万小时
    
    本文首发于公众号「前端一万小时」
    
    本文版权归作者所有,未经授权,请勿转载!
    
    本文节选自“语雀”私有付费专栏「前端一万小时 | 从零基础到轻松就业」


    ❗️❗️❗️以下链接为本文最新勘误篇章——《CSS 给盒子、背景、链接、列表、表单、表格等加样式》

    eb9f48e4a42c935628ad22700641f1aa.png
    1. 让一个元素“看不见”有几种方式?有什么区别?
    2. 单行文本溢出加 ... 如何实现?
    3. 如何在页面上实现一个圆形的可点击区域?
    4. 解释下面代码的作用?字体里 5b8b4f53 代表什么?
        body{
          font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','5b8b4f53',sans-serif;
        }
    
    5. 如何去除列表元素的默认样式前面的点 · ?
      ✅ list-style: none;
      ❌ text-decoration: none;
      ❌ opacity: 0;
      ❌ default-type: none;

    上方面试题“参考答案详解”,请点击此处查看获取方式!


    前言: 通过前 8 篇文章基础知识的铺垫,我们也算是见识了 CSS 的“神通广大”。

    这篇文章,我们就把实际工作中最高频用到的“CSS 加样式”挨个列一列,用一行行代码来展示 CSS 是如何给“盒子”、“背景”、“链接”、“列表”、“表单”、“表格”等加样式的。

    本篇的所有知识点为必掌握项,我们学习的时候可以先自己按要求写出样式,然后参照我的代码,把一行行全部弄懂。

    1 CSS 实现如下边框效果

    c37d69f0d568550fe2001da16c1e12b2.png

    参考代码:
    源码及效果展示
    HTML

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
      <p class="box1">
        “UI 设计”和“前端代码实现”在实际工作中既像“冤家”又像“情人”。此号目的:把“冤家”、“情人”变成“内人”。前期咱们聊基础,后期咱们聊提高。 一切从零开始,一点一点到一万,一步一步做大佬!
      </p>
      <p class="box2">
        “UI 设计”和“前端代码实现”在实际工作中既像“冤家”又像“情人”。此号目的:把“冤家”、“情人”变成“内人”。前期咱们聊基础,后期咱们聊提高。 一切从零开始,一点一点到一万,一步一步做大佬!
      </p>
      <p class="box3">
        “UI 设计”和“前端代码实现”在实际工作中既像“冤家”又像“情人”。此号目的:把“冤家”、“情人”变成“内人”。前期咱们聊基础,后期咱们聊提高。 一切从零开始,一点一点到一万,一步一步做大佬!
      </p>
      <p class="box4">
        “UI 设计”和“前端代码实现”在实际工作中既像“冤家”又像“情人”。此号目的:把“冤家”、“情人”变成“内人”。前期咱们聊基础,后期咱们聊提高。 一切从零开始,一点一点到一万,一步一步做大佬!
      </p>
    </body>
    </html>

    CSS

    body {
      width: 600px;
      margin: 0 auto;
    }
    p {
      margin-top: 30px;
      line-height: 1.5;
      padding: 18px 16px;
    }
    .box1 {
      border: 1px solid #ccc;
      border-radius: 3px;
    
    /*  我们用 border-radius 给边框加“圆角” */
    
    }
    .box2 {
      background-color: #ffe7e7;
      border-left: 6px solid #f44336;
      border-right: 7px solid #f44336;
    }
    .box3 {
      background-color: #ffffd7;
      border-top: 6px solid #ffeb3b;
      border-bottom: 7px solid #ffeb3b;
    }
    .box4 {
      background-color: #e7ffe7;
      border: 1px solid #4CAF50;
      border-bottom: 7px solid #4CAF50;
    }

    2 CSS 实现如下边框、按钮效果

    59aee7b4eaeccb21f0b00edc751e85cc.gif

    参考代码:
    源码及效果展示
    HTML

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
      <ul class="btn">
        <li><a class="btn-s" href=""> steal</a></li>
        <li><a class="btn-y" href=""> yellow</a></li>
        <li><a class="btn-o" href=""> orange</a></li>
        <li><a class="btn-r" href=""> red</a></li>
        <li><a class="btn-g" href=""> green</a></li>
      </ul>
    </body>
    </html>

    CSS

    body,h1,h2,h3,h4,h5,h6,ul,li,p {
      margin: 0;
      padding: 0;
    }
    /*
     以上这种常用的设置是为了把浏览器默认样式——margin、padding 所产生的缝隙给去掉,
    以便后边我们自己加样式。
     */
    
    ul {
      list-style: none;
    }
    /*  这个是为了把列表前边的“小黑点”或“数字”去掉 */
    
    a {
      text-decoration: none;
    }
    /*  这个可以把 a 链接下边默认的”下划线“去掉” */
    
    body {
      text-align: center;
    }
    .btn>li {
      display: inline-block;
      /*  使列表变成“行内盒子”,让它展示成“一行” */
    
      margin-top: 30px;
    }
    
    a {
      display: inline-block;
      /*  使“块盒子”显示为“行内盒子”,让它展示成“一行”。 */
    
      padding: 8px 10px;
      color: #000;
      border-radius: 3px;
     }
    a:hover {
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     }
    
    /*
     隐藏或者透明元素的方法:
    1. opacity: 0;   透明度为 0,整体都看不见了;
    2. visibility: hidden; 这个和上边类似;
    3. display: none; 消失,不占用位置;
    4. background-color: rgba(0, 0, 0, 0.2); 只是背景色透明。
     */
    
    
    .btn-s {
      background-color: #009688;
      color: #fff;  /*  表示“白色” */
     }
    .btn-y {
      background-color: #ff9800;
    }
    .btn-o {
      background-color: #ffeb3b;
     }
    .btn-r {
      background-color: #f44336;
      color: #fff;
     }
    .btn-g {
      background-color: #4CAF50;
      color: #fff;
    }

    3 CSS 实现如下两个表格效果

    9d8bd14c65150fdd85b90d683508ea41.png

    参考代码:
    源码及效果展示
    HTML

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>前端一万小时</title>
    </head>
    <body>
      <table class="display">
        <thead>
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Points</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
          </tr>
          <tr>
            <td>Eve</td>
            <td>Jackson</td>
            <td>94</td>
          </tr>
          <tr>
            <td>Adam</td>
            <td>Johnson</td>
            <td>67</td>
          </tr>
          <tr>
            <td>Bo</td>
            <td>Nilsson</td>
            <td>50</td>
          </tr>
          <tr>
            <td>Mike</td>
            <td>Ross</td>
            <td>35</td>
          </tr>
        </tbody>
      </table>
    
      <table class="display display-1">
        <thead>
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Points</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
          </tr>
          <tr>
            <td>Eve</td>
            <td>Jackson</td>
            <td>94</td>
          </tr>
          <tr>
            <td>Adam</td>
            <td>Johnson</td>
            <td>67</td>
          </tr>
          <tr>
            <td>Bo</td>
            <td>Nilsson</td>
            <td>50</td>
          </tr>
          <tr>
            <td>Mike</td>
            <td>Ross</td>
            <td>35</td>
          </tr>
        </tbody>
      </table>
    </body>
    </html>

    CSS

    body {
      font-family: arial;
      width: 600px;
    
      margin: 0 auto;
      /*  把 margin 设置为 0 auto,是我们让“块级元素”居中最常用的方法。 */
    }
    
    table {
      margin-top: 30px;
    }
    .display {
      border-collapse: collapse;
      /*
       border-collapse 属性设置表格的边框是否被合并为一个单一的边框。它有以下几个值:
      -- separate 默认值:边框会被分开,不会忽略 border-spacing 和 empty-cells 属性;
      -- collapse:如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性;
      -- inherit:规定应该从父元素继承 border-collapse 属性的值。
       */
    
      border-spacing: 0;
      width: 100%;
      border: 1px solid #ccc;
    }
    .display th {
      color: #fff;
      background-color: #4CAF50;
      padding: 8px 8px;
      font-weight: bold;
    }
    .display tr {
      border-bottom: 1px solid #ddd;
      text-align: left;
    }
    
    .display tr:nth-child(even) {
    /* ❗️❗️❗️这里的”结构选择器“请看下边注释详解 */
      background-color: #f1f1f1;
    }
    
    .display td {
      padding: 8px 8px;
    }
    .display.display-1 {
      border: none;
    }
    .display.display-1 th {
      background-color: #fff;
      color: #000;
    }

    ❗️❗️❗️注释:结构选择器第一类:

    1️⃣ 选择其父元素的第一个子元素。
    E:first-child
    
    2️⃣ 选择其父元素的最后一个子元素。
    E:last-child
    
    3️⃣ 选择父元素下第 n 个元素或奇偶元素,n 的值为:数字/odd/even。
    E:nth-child(n)

    第二类:

    1️⃣ 选择父元素下使用同种标签的第一个标签元素。
    E:first-of-type
    
    2️⃣ 选择父元素下使用同种标签的最后一个标签元素。
    E:last-of-type
    
    3️⃣ 选择父元素下使用同种标签的第 n 个标签元素。n 的值为:数字/odd/even。
    E:enth-of-type(n)

    ❓(用例子讲解):试着运行以下代码,并对结果作出解释。 源码及效果展示
    HTML

    <div class="container">
      <div class="box">div.box</div>
      <p class="box">p.box</p>
      <div class="box">div.box</div>
      <div class="box">
        <div class="item">div.item</div>
        <p class="item">p.item</p>
      </div>
      <p class="box"></p>
     </div>

    CSS

    .box:first-child {
      color: red;
    }
    .box:first-of-type {
      background: blue;
    }
    .box :first-child {
      font-size: 30px;
    }
    .box :first-of-type {
      font-weight: bold;
    }

    87bc046fb53031c3e45e545ecef16d3a.png

    答,以上 HTML 结构为:

    ca68ad5bb3ddd98660031d70a69274a4.png

    1.

    .box:first-child {
      color: red;
    }

    匹配类名为 box 的元素的父元素的第一个子元素,为 ①,使其字体颜色为 red。① 生效;

    2.

    .box:first-of-type {
      background: blue;
    }

    匹配类名为 box 的元素的父元素下使用“同种标签”的“第一个”标签元素。①③④ 使用的是 <div> ,②⑤ 使用的是 <p> 标签。故选同种标签的第一个,① ② 生效;

    3.

    .box :first-child {
      font-size: 30px;
    }

    选择类名为 box 的后代元素的第一个子元素,加样式。 故 ⑥ 生效;

    4.

    .box :first-of-type {
      font-weight: bold;
    }

    选择类名为 box 的后代元素同标签的第一个标签元素加样式。故 ⑥ 和 ⑦ 生效。

    4 CSS 实现如下三角形

    478a09083a1873ac25c1615e4305bcbe.png

    参考代码:
    HTML

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>前端一万小时</title>
    </head>
    <body>
      <div class="t0"></div>
      <div class="t1"></div>
      <div class="t2"></div>
      <div class="t3"></div>
      <div class="t4"></div>
      <div class="t5"></div>
      <div class="t6"></div>
    </body>
    </html>

    CSS

    • t0:

    源码及效果展示

    /*
     CSS 画三角形原理:
    边框颜色 border-color 四个值默认的加载方向是(上、右、下、左) top right bottom left。
     */
    
    .t0 {
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 100px 100px 100px 100px;
      border-color: blue yellow green red;
    }

    acc06be26d960d89bf6ed88c00886e96.png
    • t1:

    源码及效果展示

    .t1 {
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 100px 100px 0 100px; /*
                                          通过将 bottom 的 width 值设置为 0 来把多余的位置
                                         去掉!
                                          */
      border-color: blue transparent transparent transparent;
    }
    • t5:

    源码及效果展示br/> 分析

    acc06be26d960d89bf6ed88c00886e96.png

    以绿色的三角形为例,它的“高度”就是 CSS 中设置的 100px。而它的底边长则为:

    9d07a753de65d81854da345867a18da3.png

    我们可以看到,在绿色三角形中,从它的顶点垂直下来一条线将绿色三角形分为两个小的三角形:
    1️⃣左边小三角形受 left 影响;
    2️⃣右边小三角形受 right 影响。

    由此,我们可以画出 t5 这个三角形的形状:

    .t5 {
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 100px 100px 0; /*  由上边的图可以很清晰的得出各个边应该是多少 px! */
      border-color: transparent transparent red transparent;
    }

    5 CSS 对边框做圆角、圆形

    528db95972bc5694161c722228e5eb81.png

    源码及效果展示
    参考代码:
    HTML

    <div class="circle-1"></div>
    <div class="circle-2"></div>
    <div class="circle-3"></div>

    CSS

    .circle-1 {
      width: 100px;
      height: 100px;
      border: 1px solid black;
      border-radius: 15px; /*  border-radius 用于画圆角! */
    }
    .circle-2 {
      margin-top: 30px;
      width: 100px;
      height: 100px;
      border: 1px solid black;
      border-radius: 10px 8px 6px 2px;
    }
    .circle-3 {
      margin-top: 30px;
      width: 100px;
      height: 100px;
      border: 1px solid black;
    
      border-radius: 50px;
      /*  大于等于宽高的一半 50px;或者为方便,直接 50%; */
    }

    6 CSS 给盒子加个“背景”

    6.1 需要注意的

    加个“背景”就是加个图片,这个图片是背景图片,背景图片相当于:这个元素是一个窗口,而背景图片就是这个窗口后的风景。

    • 假如这个窗口没有了,那这个背景图片也可能看不到,比如没有 height,就没有窗口:

    HTML

    <div class="box"></div>

    CSS

    .box {
      width: 200px;
      height: 200px;
      border: 1px solid;
      background-image: url(https://qdywxs.github.io/css-images/css09-img01.jpg) 
    }

    30836e6b3fdb9ec9e9673a2f8300f11f.gif
    • 还有一个明显的例子:对于 span 它这个里边没有内容就代表着它没有宽度。当然就什么也没有。你稍微加一点文字,也会显示出来。

    HTML

    <span class="box"></span>

    CSS

    .box {
      width: 200px;
      height: 200px;
      border: 1px solid;
      background-image: url(https://qdywxs.github.io/css-images/css09-img01.jpg); 
    }

    0c1bb608aa23309745ee36ad77b51427.gif

    6.2 对于 background-size 需要知道的

    background-size 的设置是去拉伸背景图片(给图片加一个长度的范围)以适应给定的“宽高”尺寸。

    • ① 设置绝对长度值。

    HTML

    <div class="box"></div>

    CSS

    .box {
      width: 200px;
      height: 200px;
      border: 1px solid;
      background: url(https://qdywxs.github.io/css-images/css09-img01.jpg) 0 0 no-repeat;
      background-size: 200px 200px;
    }

    469c720c71139a05757e113649e511bd.gif
    • ② 设置为 50%,就代表窗口宽度的一半。
    .box {
      width: 500px;
      height: 200px;
      border: 1px solid;
      background: url(https://qdywxs.github.io/css-images/css09-img01.jpg) 0 0 no-repeat;
      background-size: 50%;
    }

    d8ced87ae2ca11eb6758df5d2512e8ab.gif
    • ③ 设置为 contain,缩放背景图片以完全装入背景区,可能背景区部分空白。代表不管你背景图片多么的异型,我们这个窗口都可以把你给包围起来。
    .box {
      width: 500px;
      height: 200px;
      border: 1px solid;
      background: url(https://qdywxs.github.io/css-images/css09-img01.jpg) 0 0 no-repeat;
      background-size: contain;
    }

    6dbe062c9c299897e1b04e4f8b7a86cf.gif
    • ④ 设置 cover,缩放背景图片以完全覆盖背景区,可能背景图片部分看不见。
    .box {
      width: 600px;
      height: 200px;
      border: 1px solid;
      background: url(https://qdywxs.github.io/css-images/css09-img01.jpg) 0 0 no-repeat;
      background-size: cover;
    }

    6edb187f3f114710401574fc294a6370.gif

    6.3 css sprite 精灵图

    css sprite 指将不同的图片、图标合并在一张图上。使用 css sprite 可以减少网络请求,提高网页加载性能——实质上,就是使用“背景图片”的方式来展示这些放在一张图上的小图标。

    但由于图片的“可维护性”很差,现在一般都会选择用“字体图标”——在文章 《CSS 给文本加样式:① 字体属性》中有详细讲解。

    制作精灵图的网站:CSS Sprites Generator

    图片压缩网站:tinypng
    TinyPNG 使用智能有损压缩技术来减少 PNG 文件的文件大小,提高网站加载性能。

    7 CSS 如何实现:单行文本溢出加 ...

    28abbf690554239284dfae197f69bfa3.png

    7.1 前置知识:CSS 中的 overflow 属性

    p {
      overflow: ;
    }

    9c261e91bfec5867ca9b58b90d2fcefb.png

    7.2 代码实现

    源码及效果展示
    HTML

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>前端一万小时</title>
    </head>
    <body>
      <div class="card">
        <img src="https://qdywxs.github.io/css-images/css09-img02.jpg">
        <h3><a href="#">Hello, Oli 的前端一万小时。</a></h3>
        <p>“UI 设计”和“前端代码实现”在实际工作中既像“冤家”又像“情人”。此号目的:把“冤家”、“情人”变成“内人”。前期咱们聊基础,后期咱们聊提高。 一切从零开始,一点一点到一万,一步一步做大佬!
        </p>
      </div>
    </body>
    </html>

    CSS

    .card{
      width: 150px;
      border: 1px solid #ccc;
      font-size: 12px;
      margin: 0 auto;
    }
    .card>img {
      width: 150px;
    }
    .card>h3 {
      padding: 0 10px;
    
      white-space: nowrap; /* 1️⃣首先,强制文本不换行; */
      overflow: hidden; /* 2️⃣其次,隐藏溢出; */
      text-overflow: ellipsis; /* 3️⃣最后,对溢出的文本用 ellipsis 省略号代替。 */
    }
    /*  上边的三个属性必须连用才生效——单行文本溢出加 … */
    
    .card>h3>a {
      text-decoration: none;
      color: red;
    }
    .card>p {
      padding: 0 10px;
      color: #666;
    }

    8 动手写出下边的页面

    f96a47b63c99bcb7921c62633f9cb64b.png

    参考代码:br/> 源码及效果展示
    HTML

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
      <h1 class="title">Oli's 前端一万小时</h1>
      <p class="description">理论不懂就实践,实践不会就学理论</p>
      <ul class="tab-ct">
        <li><a class="btn" href="#">项目 1</a></li>
        <li><a class="btn" href="#">项目 2</a></li>
        <li><a class="btn" href="#">项目 3</a></li>
        <li><a class="btn" href="#">项目 4</a></li>
        <li><a class="btn" href="#">项目 5</a></li>
      </ul>
      <img class="work-img" src="https://qdywxs.github.io/css-images/css09-img03.jpg" alt="">
      <ul class="operate-ct">
        <li><a class="btn" href="#">查看源代码</a></li>
        <li><a class="btn" href="#">使用说明</a></li>
      </ul>
      <p class="footer">
        作者:<a href="#">Oli</a>
      </p>
    </body>
    </html>

    CSS

    body,h1,h2,h3,h4,h5,h6,ul,li,p {
      margin: 0;
      padding: 0;
    }
    a{
      text-decoration: none;
    }
    ul {
      list-style: none;
    }
    body{
      font-family: 14px/1.4 'Lantinghei SC', 'Open Sans', Arial, 'Hiragino Sans GB', 'Microsoft YaHei', '5FAE8F6F96C59ED1', 'STHeiti', 'WenQuanYi Micro Hei', SimSun, sans-serif;
    
      /*  这里的 '5FAE8F6F96C59ED1' 就是“微软雅黑”这四个字的 Unicode 码 */
    
      /*
       我们怎么知道一个“字体”的 Unicode 码?
      我们可以右键检查元素,然后点击 console,然后输入 escape(`黑体`),就可以弹出相应的码。
      然后把 %u 换成 。
       */
    
    
      background: #fff;
      text-align: center;
    }
    .work-img {
      width: 250px;
    }
    .btn {
      display: inline-block;
      padding: 4px 6px;
      color: #fff;
      background-color: #72b890;
      border-radius: 3px;
    }
    .btn:hover {
      opacity: 0.7;
    
      /*
       隐藏或者透明元素的方法:
      1️⃣ opacity: 0;   透明度为 0,整体都看不见了;
      2️⃣ visibility: hidden; 这个和上边类似;
      3️⃣ display: none; 消失,不占用位置;
      4️⃣ background-color: rgba(0,0,0,0.2); 只是背景色透明。
       */
    
    }
    
    
    .btn:active {
      opacity: 1;
    }
    .title {
      color: #87968e;
      font-size: 35px;
      margin-top: 30px;
    }
    .description {
      color: #aaa;
      margin-top: 10px;
      opacity: 0.6;
    }
    .tab-ct {
      margin-top: 30px;
    }
    .tab-ct>li {
      display: inline-block;
      margin: 0px 4px;
    }
    .work-img {
      margin-top: 40px;
    }
    .operate-ct {
      margin-top: 40px;
    }
    .operate-ct>li {
      display: inline-block;
      margin: 0 4px;
    }
    .footer {
      color: #aaa;
      margin: 30px;
    }
    a{
      color: #72b890;
    }

    后记: CSS 能做的事情还有很多,上边介绍的都是实际工作中的高频用法,属于必掌握。至于其他用法,我们要抱有敬畏之心去细水长流地认真学习,不必一蹴而就。

    祝好,qdywxs ♥ you!

    展开全文
  • 原创:itsOli@前端一万小时本文版权归作者所有,未经授权,请勿转载!... 如何实现?3. 如何在页面上实现一个圆形的可点击区域?4. 解释下面代码的作用?字体里\5b8b\4f53代表什么?body{font:1...

    a9ff028e8a0dcb57702fd10d990859ef.png

    原创:itsOli  @前端一万小时

    本文版权归作者所有,未经授权,请勿转载!

    本文节选自“语雀”私有付费专栏「前端一万小时 | 从零基础到轻松就业」

    8624246dabc5432ec7d589f4214f13db.png

    1. 让一个元素“看不见”有几种方式?有什么区别?
    2. 单行文本溢出加 ... 如何实现?
    3. 如何在页面上实现一个圆形的可点击区域?
    4. 解释下面代码的作用?字体里 \5b8b\4f53 代表什么?
        body{
          font12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
        }

    5. 如何去除列表元素的默认样式前面的点 · ?
      ✅ list-stylenone;
      ❌ text-decorationnone;
      ❌ opacity: 0;
      ❌ default-typenone;

    🙋上方面试题“参考答案详解”,请点击文末“


    前言:通过前 8 篇文章基础知识的铺垫,我们也算是见识了 CSS 的“神通广大”。

    这篇文章,我们就把实际工作中最高频用到的“CSS 加样式”挨个列一列,用一行行代码来展示 CSS 是如何给“盒子”、“背景”、“链接”、“列表”、“表单”、“表格”等加样式的。

    本篇的所有知识点为必掌握项,我们学习的时候可以先自己按要求写出样式,然后参照我的代码,把一行行全部弄懂。

    1 CSS 实现如下边框效果

    5aa7de368ac14b7a32d8940fab07abf3.png

    参考代码:
    🔗源码及效果展示https://jsbin.com/wequzugoba/edit?html,css,output

    HTML

    html>
    CSS
    body {

    2 CSS 实现如下边框、按钮效果

    c98c75b8c3119d4b0b83a34dbc802d7d.gif

    参考代码:
    🔗源码及效果展示https://jsbin.com/hewomutoku/1/edit?html,css,output

    HTML

    html>
    CSS
    body,

    3 CSS 实现如下两个表格效果

    dc45d63d472b3c0f7698f7d6a8572936.png

    参考代码:
    🔗源码及效果展示https://jsbin.com/yaguhobamo/edit?html,css,output

    HTML

    html>
    CSS
    body {
    ❗️❗️❗️注释:结构选择器第一类:
    ① 选择其父元素的第一个子元素。
    E:first-child

    ② 选择其父元素的最后一个子元素。
    E:last-child

    ③ 选择父元素下第 n 个元素或奇偶元素,n 的值为:数字/odd/even。
    E:nth-child(n)
    第二类:

    ❓(用例子讲解):试着运行以下代码,并对结果作出解释。
    🔗源码及效果展示https://jsbin.com/jesaximine/edit?html,css,output

    HTML

    <div class="container">
    CSS

    .box:first-child {color: red;
    }.box:first-of-type {background: blue;
    }.box :first-child {font-size30px;
    }.box :first-of-type {font-weight: bold;
    }

    3b90d77a500c0c763f8c8e0d1f0ba9c5.png

    💡答,以上 HTML 结构为:

    d5b2bdc9f7e5e0abfcf54bff4f0f99df.png

    1.
    .box
    匹配类名为 box 的元素的父元素的第一个子元素,为 ①,使其字体颜色为 red。① 生效;2.
    .box
    匹配类名为 box 的元素的父元素下使用“同种标签”的“第一个”标签元素。①③④ 使用的是
     ,②⑤ 使用的是  标签。故选同种标签的第一个,①② 生效;3.
    .box 
    选择类名为 box 的后代元素的第一个子元素,加样式。故 ⑥ 生效;

    4.

    .box 
    选择类名为 box 的后代元素同标签的第一个标签元素加样式。故 ⑥ 和 ⑦ 生效。

    4 CSS 实现如下三角形

    72fc52d02636e559c0b15f29a108fe9d.png

    参考代码:
    HTML
    html>
    CSS

    t0:

    🔗源码及效果展示https://jsbin.com/tuqihevite/edit?html,css,output

    /*
    🏆CSS 画三角形原理:
    边框颜色 border-color 四个值默认的加载方向是(上、右、下、左) top right bottom left。
     */
    .t0 {width0;height0;border-style: solid;border-width100px 100px 100px 100px;border-color: blue yellow green red;
    }

    5ae01994ac66a874e22064e525da092d.png

    t1:

    🔗源码及效果展示https://jsbin.com/pugototalu/edit?html,css,output

    .t1 {width0;height0;border-style: solid;border-width100px 100px 0 100px/*
                                         🚀通过将 bottom 的 width 值设置为 0 来把多余的位置
                                         去掉!
                                           */
    border-color: blue transparent transparent transparent;
    }

    t5:

    🔗源码及效果展示https://jsbin.com/taparetoxo/edit?html,css,output🏆分析

    5ae01994ac66a874e22064e525da092d.png

    以绿色的三角形为例,它的“高度”就是 CSS 中设置的 100px。而它的底边长则为:

    d15a6fe42c73fc628ffe7595cf024630.png

    我们可以看到,在绿色三角形中,从它的顶点垂直下来一条线将绿色三角形分为两个小的三角形:
    ① 左边小三角形受 left 影响;
    ② 右边小三角形受 right 影响。由此,我们可以画出 t5 这个三角形的形状:
    .t5 {

    5 CSS 对边框做圆角、圆形

    3a72d9f50ad4e89d413784481aa1fc54.png

    🔗源码及效果展示https://jsbin.com/xovapuyofi/edit?html,css,output

    参考代码:
    HTML
    <div class="circle-1">div>
    CSS
    .circle-1 {

    6 CSS 给盒子加个“背景”

    6.1 需要注意的

    加个“背景”就是加个图片,这个图片是背景图片,背景图片相当于:这个元素是一个窗口,而背景图片就是这个窗口后的风景。

    假如这个窗口没有了,那这个背景图片也可能看不到,比如没有 height,就没有窗口:

    HTML

    <div class="box">div>
    CSS

    .box {width200px;height200px;border1px solid;background-imageurl(https://qdywxs.github.io/css-images/css09-img01.jpg) 
    }

    955287f0f0736cc669902b9fdde3e807.gif

    还有一个明显的例子:对于 span 它这个里边没有内容就代表着它没有宽度,当然就什么也没有。你稍微加一点文字,也会显示出来。

    HTML

    <span class="box">span>
    CSS

    .box {width200px;height200px;border1px solid;background-imageurl(https://qdywxs.github.io/css-images/css09-img01.jpg); 
    }

    e2e3ae761d9f8de891c4c8a21fc57b7c.gif

    6.2 对于 background-size 需要知道的

    background-size 的设置是去拉伸背景图片(给图片加一个长度的范围)以适应给定的“宽高”尺寸。

    ① 设置绝对长度值:

    HTML

    <div class="box">div>
    CSS

    .box {width200px;height200px;border1px solid;backgroundurl(https://qdywxs.github.io/css-images/css09-img01.jpg) 0 0 no-repeat;background-size200px 200px;
    }

    e85975d7f6145cc84b84b3f10b1621b8.gif② 设置为 50%,就代表窗口宽度的一半:

    .box {width500px;height200px;border1px solid;backgroundurl(https://qdywxs.github.io/css-images/css09-img01.jpg) 0 0 no-repeat;background-size50%;
    }

    dbedf3ea287d36bda4e1a7cbe77380c9.gif③ 设置为 contain,缩放背景图片以完全装入背景区,可能背景区部分空白。代表不管你背景图片多么的异型,我们这个窗口都可以把你给包围起来:

    .box {width500px;height200px;border1px solid;backgroundurl(https://qdywxs.github.io/css-images/css09-img01.jpg) 0 0 no-repeat;background-size: contain;
    }

    ee9e544c2f4349d01468c26851b42014.gif④ 设置 cover,缩放背景图片以完全覆盖背景区,可能背景图片部分看不见:

    .box {width600px;height200px;border1px solid;backgroundurl(https://qdywxs.github.io/css-images/css09-img01.jpg) 0 0 no-repeat;background-size: cover;
    }

    71170453a98231711709b46d6ac4b921.gif

    6.3 CSS Sprite 精灵图

    CSS Sprite 指将不同的图片、图标合并在一张图上。使用 CSS Sprite 可以减少网络请求,提高网页加载性能——实质上,就是使用“背景图片”的方式来展示这些放在一张图上的小图标。

    但由于图片的“可维护性”很差,现在一般都会选择用“字体图标”——在文章《CSS 给文本加样式:① 字体属性》中有详细讲解。

    💡制作精灵图的网站:CSS Sprites Generatorhttps://www.toptal.com/developers/css/sprite-generator/

    💡图片压缩网站:TinyPNGhttps://tinypng.com/

    TinyPNG 使用智能有损压缩技术来减少 PNG 文件的文件大小,提高网站加载性能。

    7 CSS 如何实现:单行文本溢出加 …

    4734de337543fc0418862c1f8379b5dd.png

    7.1 前置知识:CSS 中的 overflow 属性

    p {overflow: 值;
    }

    属性visible默认值,内容不会被修剪,会呈现在元素框之外;hidden内容会被修剪,并且其余内容是不可见的;scroll内容会被修剪,但浏览器会显示滚动条以便查看其余的内容;auto如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容;inherit规定应该从父元素继承 overflow 属性的值。


    7.2 代码实现

    🔗源码及效果展示https://jsbin.com/kujewijega/1/edit?html,css,output

    HTML

    html>
    CSS
    .card{

    8 动手写出下边的页面

    549bcd61630a0708c9aef00fbb4cff6c.png

    💡参考代码:
    🔗源码及效果展示https://jsbin.com/yolanuwuwa/edit?html,css,output

    HTML

    html>
    CSS
    body,

    后记:CSS 能做的事情还有很多,上边介绍的都是实际工作中的高频用法,属于必掌握。至于其他用法,我们要抱有敬畏之心去细水长流地学习,不必一蹴而就。

    祝好,qdywxs ♥ you!

    ddcd15a582d60f7c86f2961f13becf2d.gif点击“
    展开全文
  • css样式继承规则详解

    2018-06-25 19:00:00
    css样式继承规则详解 一、总结 一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则)。 ...3、如何给当前设置的样式添加最高权限? !important 设置某个规则比其他的规则更重要 ...

    css样式继承规则详解

    一、总结

    一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则)。

     

    1、继承中哪些样式不会被继承?

    多数边框类属性,比如象Padding(补白),Margin(边界),背景和边框的属性都是不能继承的。

     

    2、表格能继承父亲的样式么?

    不能

     

    3、如何给当前设置的样式添加最高权限?

    !important  设置某个规则比其他的规则更重要

     

    4、继承发生冲突的时候,什么样式获得胜利?

    最近祖先

     

    二、CSS3学习笔记-1:CSS样式继承

    自己在写css时总会遇上css样式继承的问题,好在一般问题不大,但一直也不明白css样式继承的规则,最近发现了一篇文章讲的不错,因此转载过来:

    所谓CSS的继承是指被包在内部的标签将拥有外部标签的样式性质。继承特性最典型的应用通常发挥在整个网页的样式预设,需要指定为其它样式的部份设定在个别元素里即可。这项特性可以给网页设计者提供更理想的发挥空间。但同时继承也有很多规则,应用的时候容易让人迷惑

    CSS的一个主要特征就是继承,它是依赖于祖先-后代的关系的。继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。下面举例说明:

      样式定义:body{color:red;}

      应用举例代码:<p>CSS的<strong>层叠和继承</strong>深入探讨</p>

    这段代码的应用结果是:“CSS的层叠和继承深入探讨”这段话是红颜色的,“层叠和继承”由于应用了strong元素,所以是粗体。这很符合制作者的意图,也是为什么继承是CSS的一部分的原因。

    1.CSS继承的局限性 

    在CSS中,继承是一种非常自然的行为,我们甚至不需要考虑是否能够这样去做,但是继承也有其局限性。

    首先,有些属性是不能继承的。这没有任何原因,只是因为它就是这么设置的。举个例子来说:border属性,大家都知道,border属性是用来设置元素的边框的,它就没有继承性。如下图所示,如果继承了边框属性,那么文档看起来就会很奇怪,除非采取另外的措施关掉边框的继承属性。

    多数边框类属性,比如象Padding(补白),Margin(边界),背景和边框的属性都是不能继承的

    2.继承中容易引起的错误

     有时候继承也会带来些错误,比如说下面这条CSS定义:

       Body{color:blue}

     在有些浏览器中这句定义会使除表格之外的文本变成蓝色。从技术上来说,这是不正确的,但是它确实存在。所以我们经常需要借助于某些技巧,比如将CSS定义成这样:

       Body,table,th,td{color:blue}

     这样表格内的文字也会变成蓝色。

     3.多种样式混合应用

     既然有了继承性,那么在样式表中的应用上可能会有些读者搞不清,多个样式表同时应用到一个对象上会发生什么情形呢?先举个简单的例子:

       样式定义:.apple{color:red;}  H1{color:yellow;}

       应用举例代码:<H1 CLASS=”apple”>这儿的苹果好红啊</H1>

    应用举例效果:因为选择符H1和.apple都匹配上面的H1元素,那么到底浏览器会应用哪一个呢?通过在浏览器中观察,我们发现这段文字应用了.apple这个样式,所以它显示的是红色。这是因为两条规则的特殊性不一样,CSS规则必须这样进行处理。

    样式表中的特殊性描述了不同规则的相对权重,它的基本规则是:

      统计选择符中的ID属性个数。 

      统计选择符中的CLASS属性个数。 

      统计选择符中的HTML标记名格式。 

      最后,按正确的顺序写出三个数字,不要加空格或逗号,得到一个三位数。( 注意,你需要将数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。

      以下是一个按特性分类的选择符的列表:

      H1 {color:blue;}                        特性值为:1

      P EM {color:purple;}                    特性值为:2

      .apple {red;}                           特性值为:10 

      P.bright {color:yellow;}                  特性值为:11

      P.bright EM.dark {color:brown;}           特性值为:22

      #id316 {color:yellow}                   特性值为:100

      从上表我们可以看出#id316具有更高的特殊性,因而它有更高的权重。当有多个规则都能应用于同一个元素时,权重越高的样式将被优先采用

    4.CSS继承的优先级问题

      上面我们讨论了CSS的继承性和特殊性,在特殊性的框架下,被继承的特性值为0,这就意味着任何显示声明的规则将会覆盖其继承样式。因此,不管一条规则具有多高的权重,如果没有其他规则能应用于这个继承元素,那么它也只是个被继承的规则而已,举例说明。

      样式定义:

      BODY {background:black;}

      LI {color:gray;}

      UL.white {color:white}

      应用举例代码:

    <ul>

      <li>举例列表一</li>

      <li>举例列表二</li>

      <li>举例列表三</li>

      <li>举例列表四</li>

    </ul>

    有些读者可能认为除包含.white类的列表项显示为白色外,其余所有的列表项都应该是灰色的。然而情况并非如此。

     为什么会出现这样的情况呢?因为带选择符LI的显式声明的权值比从UL.white规则那里继承过来的权值要大,所以每个列表项都是灰色的。

     可能有些地方不是很好理解,大家多思考一下就会明白,平时在应用样式表的时候多留意思考一下。

     下面我们再来看一个例子,若给定如下所示的标记,则EM强调文字将会是灰色的,而非黑色,因为EM规则的权值要大于从H1元素继承来的权值:

      样式定义: 

      H1#id316 {color:black;}                  特性值为:101

      EM {color:gray;}                        特性值为:1

      应用举例代码:

      <H1 ID=”id316”>深入探讨<EM>CSS的继承性</EM></H1>

    这是因为第二条EM规则的特性值(1)要比被继承的特性值(0)要大,事实上规定H1#id316的原始特性值(101)对其继承值没有影响,仍旧为0。

      小技巧:

      如果想让H1始终为黑色,而EM文字在其他情况下红色,那么下面的样式表设置就是一个很好的方法:

      H1,H1 EM {color:black;}                 特性值为:1,2

      EM {color:red;}                          特性值为:1

      给定这个规则后,除在H1元素内的任何EM文字就都是红色,而H1内的EM文字仍旧为黑色,由于其选择符分组,在第一条规则中就有两条有效的规则(一条是对H1的,另一条是对H1 EM的)也就有两个特性值——每条规则一个。

      上面我们讨论了多个样式规则同时应用于同一对象时,哪个规则会被最终应用的一些情况,可能有些细心的读者会说,那STYLE元素呢?对啊,HTML代码中可以直接应用内联样式STYLE的嘛。那么它的特性值如何呢?

      回答是这样的:带有STYLE的元素在CSS1下其特性值为100,尽管类似于#ID316这样的ID选择符的特性值也为100,但在实际应用中,STYLE这一权值会更高一些,因为STYLE元素的值看起来要比多数普通规则的权值大。所以我们可以看出内联样式具有高的特性值,具体的例子我们就不举了,大家可以自己试试。

    5.人为定义CSS继承优先级

      在制作网页的过程中,我们可能想要设置某个规则比其他的规则更重要,CSS中允许这样设置,它们被称为重要规则(important rule)。这是根据其声明的方式和它们的自然属性来命名的。通过在一条规则的分号前插入!important这样一个短语来标记一条重要规则,比如说:

      P.apple {color:#red !important; background:white;}

      颜色值#red被标记为!important,而背景色white未被标记,如果需要二条规则都是重要的话,那么每条规则都需要标上!important。

      正确地放置!important的位置是很重要的,否则整条规则将为无效。!important总是放在规则声明的最后,在分号之前。

      标记为!important的规则具有最高的权值,也就是说他没有具体的特性值,但是比其他的权值都要大。需要注意的是,虽然制作者定义的样式比用户定义的样式具有更高权值时,但!important规则恰恰相反:重要的用户定义规则要比制作者定义的样式具有更高权值,即使是标记为!important的重要规则也是如此。

      看了这么多文字介绍后,我们来举个例子看一下:

      样式定义:

      H1 {color:gray !important;}

      应用举例代码:

      <H1 STYLE=”color:black;”>看这儿!</H1>

      应用举例效果:

      !important规则会覆盖内联STYLE属性的内容,所以结果文字是灰色的而不是黑色的。

    还有最后一种需要考虑的情况:继承值总是具有特性值0的特点,即使是从带有!important的规则继承的值也是如此,在匹配重要规则的元素之外,重要性也会随之消失,这点是需要我们特别注意的!

    转载地址:http://www.360doc.com/content/10/0312/12/495229_18463787.shtml#

     

     

    三、CSS中的样式覆盖原则

    规则一:由于继承而发生样式冲突时,最近祖先获胜(最近原则)。

    CSS的继承机制使得元素可以从包含它的祖先元素中继承样式,考虑下面这种情况:

    <html>
    <head>
    <title>rule 1title>
    <style>
    body {color:black;}
    p {color:blue;}
    style>
    head>
    <body> 
    <p>welcome to <strong>gaodayue的网络日志strong>p>
    body>
    html>

    strong分别从body和p中继承了color属性,但是由于p在继承树上离strong更近,因此strong中的文字最终继承p的蓝色。

    规则二:继承的样式和直接指定的样式冲突时,直接指定的样式获胜(最直接原则)。

    在上面的例子中,假如还指定了strong元素的样式,如:

    strong {color:red;} 
    那么根据规则二,strong中的文字最终显示为红色。

    规则三:直接指定的样式发生冲突时,样式权值高者获胜。

    样式的权值取决于样式的选择器,权值定义如下表。

    css选择器 权值 
    标签选择器 1 
    类选择器 10 
    ID选择器 100 
    内联样式 1000 
    伪元素(:first-child等) 1 
    伪类(:link等) 10 

    可以看到,内联样式的权值>>ID选择器>>类选择器>>标签选择器,除此以外,后代选择器的权值为每项权值之和,比如”#nav .current a”的权值为100 + 10 + 1 = 111。

    规则四:样式权值相同时,后者获胜。

    考虑下面这种情况

     
    .byline a {color:red;}p .email {color:blue;} 
    “.byline a”与”p .email”都直接指定了上面的a元素,且权值都为11,根据规则四,最终显示蓝色。

    由于样式表可以是外部的,也可以是内部的,规则四提醒我们要注意外部样式表引入的顺序(及元素的顺序),以及外部样式表与内部样式表的出现位置。一般来说,内部样式表出现在所有外部样式表的引入之后,一般是在之前。

    规则五:!important的样式属性不被覆盖。

    !important 可以看做是万不得已的时候,打破上述四个规则的”金手指”。如果你一定要采用某个样式属性,而不让它被覆盖的,可以在属性值后加上!important,以规则四的例子为例,”.byline a {color:red !important;}”可以强行使链接显示红色。大多数情况下都可以通过其他方式来控制样式的覆盖,不能滥用!important。

     

    转载自:http://bbs.csdn.net/topics/390403416

     

     

    转载于:https://www.cnblogs.com/Renyi-Fan/p/9225805.html

    展开全文
  • 在Html中使用table是网页制作中必不可缺的一部分,如果直接...其实很简单,table使用css样式 border-collapse: collapse; 这个样式的意思就是“为表格设置合并边框模型” 这个属性经测试,支持一下浏览器: ...
  • 本篇文章大家带来的内容是关于利用CSS如何实现文字的竖排,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。样式表的文字处理属性中有两个重要的属性:writing-mode和text-align。让我们先看看...
  • CSS3-02 样式 1

    2019-10-07 20:11:55
    上一篇博客中,概述了如何在 HTML 文档中使用 CSS,以及如何选择 HTML 元素,并且在文档的最后以表格的形式出了 CSS 中所有的属性。在接下来的这篇博客中,将阐述主要 HTML 元素的可控制 CSS 样式,并以示例的方式...
  • 12.5 自动选择CSS样式 第3部分 CSS混合应用技术篇 第13章 CSS与JavaScript的综合应用 13.1 JavaScript概述 13.1.1 JavaScript简介 13.1.2 JavaScript的特点 13.1.3 JavaScript与CSS 13.2 ...
  • PAGE PAGE 2 dreamweaver软件设置表格颜色的方法 在dreamweaver上设计了一个表格但是却不知道该怎么更改颜色那么如何设置dreamweaver中表格的颜色呢其实这个需要用到CSS样式下面大家介绍dreamweaver软件设置表格...
  •  本书系统地讲解了CSS层迭样式表的基础理论和实际运用技术,通过大量实例对CSS进行深入浅出的分析,主要包括CSS的基本语法和概念,设置文字、图片、背景、表格、表单和菜单等网页元素的方法,以及CSS滤镜的使用。...
  • 本书系统地讲解了CSS层迭样式表的基础理论和实际运用技术,通过大量实例对CSS进行深入浅出的分析,主要包括CSS的基本语法和概念,设置文字、图片、背景、表格、表单和菜单等网页元素的方法,以及CSS滤镜的使用。...
  • 本书系统地讲解了CSS层叠样式表的基础理论和实际运用技术,通过大量实例对CSS进行深入浅出的分析,主要包括CSS的基本语法和概念,设置文字、图片、背景、表格、表单和菜单等网页元素的方法,以及CSS滤镜的使用。...
  • 现在前端页面效果日益丰富,默认的input组件样式显然不能满足设计需求。...元素设置为透明,然后通过定位让用户看到的是元素,利用css的原生属性来判断用户的操作,设置选中后的label样式,即input[t...
  • 本书系统地讲解了CSS层迭样式表的基础理论和实际运用技术,通过大量实例对CSS进行深入浅出的分析,主要包括CSS的基本语法和概念,设置文字、图片、背景、表格、表单和菜单等网页元素的方法,以及CSS滤镜的使用。...
  • 本书系统地讲解了CSS层迭样式表的基础理论和实际运用技术,通过大量实例对CSS进行深入浅出的分析,主要包括CSS的基本语法和概念,设置文字、图片、背景、表格、表单和菜单等网页元素的方法,以及CSS滤镜的使用。...
  • 当我们在进行页面布局时,除了图片,文字之外,用的最多的就是table表格了,对于很多人来说,table的边框还是比较烦人的,...一般我们写一个表格,就是下面的这种写法,给表格border,还有你想要的样式,代码如下:...
  • layui中表格如何选中高亮

    千次阅读 2018-12-17 21:18:47
    &lt;table id="demo2" lay-filter="...//获取当前行的所有兄弟姐妹元素,把他们的background-color样式清楚,然后再当前行设置颜色。 $(obj.tr).siblings().css("ba...
  • 在2005年11月,AlistApart.com发表了一篇关于他们如何使用HTML和CSS发表一本书的文章... 样式表可以设置页面大小及其边距 . 页面模板可以出名称,元素可以说明要打印的页面 . 此外,源文档中的元素可以强制分页 . ...
  • 零基础学HTML CSS源代码

    热门讨论 2010-05-10 07:57:26
    style1.css 名为style1的CSS样式文件。 style2.css 名为style2的CSS样式文件。 style3.css 名为style3的CSS样式文件。 第16章(源代码\第16章) 示例描述:本章演示字体属性用法。 间距与间隔....
  • 可以编辑的表格

    2016-04-01 18:51:49
    廊坊下雪了,15年的第二场雪,比14的来的稍晚一些,停靠在11教门前的自行车,成了... 当时学习css的时候,关于表格和表单的所有设置,我们都是在html代码里面实现的,今天小编主要大家讲解一下,如何利用JQuery+js
  • 《精通HTML5 + CSS3+JavaScript网页设计》内容主要包括CSS3的基本语法和概念,设置文字、段落、图片、背景、表格、表单和菜单等网页元素的方法,以及CSS3滤镜的应用。重点介绍如何使用DlV+CSS3进行网页布局,注重...
  • JQuery实战--可以编辑的表格

    千次阅读 热门讨论 2015-03-16 07:52:58
    廊坊下雪了,15年的第二场雪,比14的来的稍晚一些,停靠在11教门前的自行车,成了... 当时学习css的时候,关于表格和表单的所有设置,我们都是在html代码里面实现的,今天小编主要大家讲解一下,如何利用JQuery+js+c
  • 表格的列比较多的时候,可能就需要固定表格的宽度了...下面就说说设置如何给datatables设置固定的宽度。1、html代码ck序号账号姓名CPIDCP名称操作2、覆盖某些样式(我们的样式优先级高,所以会覆盖内置的样式)#tab...
  • 为了方便阅读,本书中的部分案例代码仅提供了CSS样式代码和局部HTML代码,所有CSS实例代码必须置于一个外部样式文件或HTML文档的<head></head>标签内。 由于CSS3技术还在不断的完善与更新中,建议根据...

空空如也

空空如也

1 2 3 4 5
收藏数 90
精华内容 36
关键字:

如何给表格设置css样式