随笔- 30 文章- 6 评论- 0 阅读- 1708

css的样式

一,css的文本样式

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one {
            text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
            color: #ffffff;
            background: #CCC;
 
        }
 
        .two {
            text-shadow: 0 0 0.2em #F87, 0 0 0.2em #f87;
            color: #d1d1d1;
            background: #CCC;
        }
 
        .box {
            box-shadow: 1px 1px 10px 20px red inset ;
            width: 100px;
            height: 100px;
        }
 
        p {
            text-shadow: 1px 1px  #000, -1px -1px  #fff;
            background-color: #ccc;
            font-size: 20px;
            font-weight: bold;
            color:#D1D1D1;
        }
 
        .three {
            text-shadow: 1px 1px  #fff, -1px -1px  #000;
            background-color: #ccc;
            font-size: 20px;
            font-weight: bold;
            color:#D1D1D1;
             
 
        }
    </style>
</head>
 
<body>
    <p class="one">10月9日</p>
    <p>10月9日</p>
    <p class="three">10月9日</p>
    <p class="two">10月9日</p>
    <div class="box">10月9日</div>
</body>
 
</html>

　　text-shadow来控制文本的阴影位置与颜色

text-shadow: 0 0 0.2em #F87, 0 0 0.2em #f87;

1	`text-indent:` `20px; 文本的首行缩进`

　　文本的位置

1	`text-align:` `center;`

　　文本的最后一行普铺满

  text-align-last:justify ;

1	`white-space:` `nowrap; 文本不换行`

text-overflow: ellipsis; 超出部分用省略号表示
           width: 200px; 宽200px
           overflow: hidden; 超出部分隐藏

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        p {
            text-indent: 20px;

            text-align: center;
            text-align-last:justify ;
            white-space: nowrap;
            text-overflow: ellipsis;
            width: 200px;
            overflow: hidden;

         }    
         h1 {
            text-decoration-line: underline;
            text-decoration-color: blue;
            /* text-decoration: line-through 贯穿线,none没有线,underline下划线,overline上划线; */
            text-decoration-style: solid;
            letter-spacing: 10px;
            
            white-space: nowrap;
            text-overflow: ellipsis;
            width: 200px;
            overflow: hidden;
            
         }
    
     .one {
           
            white-space: nowrap;
            text-overflow: ellipsis;
            width: 200px;
            overflow: hidden;
      }
    </style>
</head>
<body>
    <h1>wwwwwwwwwwwwww</h1>
    <p class="one">1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p>
    <p>
        新华社北京10月8日电日对宣传思想文化工作作出重要指示指出，宣传思想文化工作事关党的前途命运，事关国家长治久安，事关民族凝聚力和向心力，是一项极端重要的工作。党的十八大以来，党中央从全局和战略高度，对宣传思想文化工作作出系统谋划和部署，推动新时代宣传思想文化事业取得历史性成就，意识形态领域形势发生全局性、根本性转变，全党全国各族人民文化自信明显增强、精神面貌更加奋发昂扬。</p>
        <p >调，新时代新征程，世界百年未有之大变局加速演进，中华民族伟大复兴进入关键时期，战略机遇和风险挑战并存，宣传思想文化工作面临新形势新任务，必须要有新气象新作为。要坚持以新时代中国特色社会主义思想为指导，全面贯彻党的二十大精神，聚焦用党的创新理论武装全党、教育人民这个首要政治任务，围绕在新的历史起点上继续推动文化繁荣、建设文化强国、建设中华民族现代文明这一新的文化使命，坚定文化自信，秉持开放包容，坚持守正创新，着力加强党对宣传思想文化工作的领导，着力建设具有强大凝聚力和引领力的社会主量、有利文化条件。
        </p>
        <p>义意识形态，着力培育和践行社会主义核心价值观，着力提升新闻舆论传播力引导力影响力公信力，着力赓续中华文脉、推动中华优秀传统文化创造性转化和创新性发展，着力推动文化事业和文化产业繁荣发展，着力加强国际传播能力建设、促进文明交流互鉴，充分激发全民族文化创新创造活力，不断巩固全党全国各族人民团结奋斗的共同思想基础，不断提升国家文化软实力和中华文化影响力，为全面建设社会主义现代化国家、全面推进中华民族伟大复兴提供坚强思想保证、强大精神力</p>
        
</body>
</html>

二,伪类

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:link {
            color: blue;
        }
 
        a:visited {
            color: rgb(208, 14, 56);
        }
 
        a:hover {
            color: purple;
        }
 
        a:active {
            color: green;
        }
 
        div::after {
            content: "hello";
            color: red;
        }
 
        div::before {
            content: "word";
            color: gold;
        }
 
        li:nth-child(2n) {
            color: green;
        }
 
        li:nth-child(2n-1) {
            color: red;
        }
 
        li:first-child {
            color: yellow;
        }
        li:last-child{
            color: aqua;
        }
 
    </style>
</head>
 
<body>
    <a href="https://www.7k7k.com">7k7k</a>
    <div>新华社北京10月8日电
        中共中央***、中央军委主席近日对宣传思想文化工作作出重要指示指出，宣传思想文化工作事关党的前途命运，事关国家长治久安，事关民族凝聚力和向心力，是一项极端重要的工作。党的十八大以来，党中央从全局和战略高度，对宣传思想文化工作作出系统谋划和部署，推动新时代宣传思想文化事业取得历史性成就，意识形态领域形势发生全局性、根本性转变，全党全国各族人民文化自信明显增强、精神面貌更加奋发昂扬。
    </div>
    <ul>
        <li>新华社北京10月8日电</li>
        <li>新华社北京10月8日电</li>
        <li>新华社北京10月8日电</li>
        <li>新华社北京10月8日电</li>
    </ul>
</body>
 
</html>

　　三,表单

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:link {
            color: blue;
        }
 
        a:visited {
            color: rgb(208, 14, 56);
        }
 
        a:hover {
            color: purple;
        }
 
        a:active {
            color: green;
        }
 
        div::after {
            content: "hello";
            color: red;
        }
 
        div::before {
            content: "word";
            color: gold;
        }
 
        li:nth-child(2n) {
            color: green;
        }
 
        li:nth-child(2n-1) {
            color: red;
        }
 
        li:first-child {
            color: yellow;
        }
        li:last-child{
            color: aqua;
        }
 
    </style>
</head>
 
<body>
    <a href="https://www.7k7k.com">7k7k</a>
    <div>新华社北京10月8日电
        中共中央***、中央军委主席近日对宣传思想文化工作作出重要指示指出，宣传思想文化工作事关党的前途命运，事关国家长治久安，事关民族凝聚力和向心力，是一项极端重要的工作。党的十八大以来，党中央从全局和战略高度，对宣传思想文化工作作出系统谋划和部署，推动新时代宣传思想文化事业取得历史性成就，意识形态领域形势发生全局性、根本性转变，全党全国各族人民文化自信明显增强、精神面貌更加奋发昂扬。
    </div>
    <ul>
        <li>新华社北京10月8日电</li>
        <li>新华社北京10月8日电</li>
        <li>新华社北京10月8日电</li>
        <li>新华社北京10月8日电</li>
    </ul>
</body>
 
</html>

　　4.表格

# 7.表格样式
 
## 1 表格样式
 
### 1.1 width
 
设置宽度
 
### 1.2 height
 
设置⾼度
 
### 1.3 border
 
设置边框粗细
 
### 1.4 border-collapse
 
collapse 设置表格的边框是否被折叠成一个单一的边框或隔开
 
### 1.5 text-align
 
⽔平⽅向对⻬⽅式，它的值： left | center | right
 
### 1.6 vertical-align
 
垂直⽅向对⻬⽅式，它的值：top | middle | bottom
 
```html
  <table width=""  height="" bgcolor= "" border=""  align= "" cellpadding=""  cellspacing="" >
      <caption  align= "" ></caption>
      <tr  align=""  valign= ""  bgcolor= "" >
          <th></th>
          <th></th>
      </tr>
      <tr>
        <td rowspan=""  colspan="" width="" height=""  align=" left|center|right"            valign= "top|middle|bottom"   bgcolor="" ></td>
        <td></td>
      </tr>
  </table>
```