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;
text-indent: 20px; 文本的首行缩进
文本的位置
text-align: center;
文本的最后一行普铺满
text-align-last:justify ;
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> ```
本文来自博客园,作者:刘先生的爱心博客,转载请注明原文链接:https://www.cnblogs.com/liu521125/p/17753102.html
一点一滴记录着学习html5 css3 和js 的时光