Community Learn Tools Library Leisure
search
English
Home > List of blog posts > HTML_002_CSS元素样式来源
Blogger Information
Blog 2
fans 0
comment 0
visits 987
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML_002_CSS元素样式来源
CLAY
Original
565 people have browsed it
css元素样式来源：
  1. 当前文档: <style>
  2. 当前元素的属性: style="..."
  3. 外部公共样式: common.css jQuery.css layui.css <link>引入

CSS元素样式来源

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <link rel="stylesheet" href="static/css/style1.css" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <img
  11.       src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4113007248,1487639643&fm=26&gp=0.jpg"
  12.       alt=""
  13.     />
  14.     <h1 class="title">满江红</h1>
  15.     <h1 id="content-one" class="content">怒发冲冠，凭栏处、潇潇雨歇。</h1>
  16.     <h1 class="content">抬望眼、仰天长啸，壮怀激烈。</h1>
  17.     <h1 id="content-one" class="content" style="color: darkcyan">
  18.       三十功名尘与土，八千里路云和月。
  19.     </h1>
  20.     <h1 id="content-one" class="content-four">莫等闲、白了少年头，空悲切。</h1>
  21.     <h1>靖康耻，犹未雪。</h1>
  22.     <h1>臣子恨，何时灭。</h1>
  23.     <h1>驾长车，踏破贺兰山缺。</h1>
  24.     <h1>壮志饥餐胡虏肉，笑谈渴饮匈奴血。</h1>
  25.   </body>
  26. </html>
  1. /* 标签：选择器selector */
  2. /* 选择器  */
  3. h1 {
  4.   /* 声明：属性color: 值green */
  5.   /* 声明块：使用大括号 将多个声明包裹起来 */
  6.   color: green;
  7.   font-weight: lighter;
  8.   font-size: 20px;
  9.   text-align: center;
  10. }
  11. /*
  12.       声明：由属性和属性值两部分组成
  13.       声明块：由一个或多个声明，包裹在一对大括号中
  14.       选择器：写在声明块前面的一个标识符，用来选择页面中一个或多个元素
  15.       规则集：选择器和声明块组成
  16.       */
  18. /* #id选择器*/
  19. #content-one {
  20.   color: violet;
  21.   font-size: 20px;
  22. }
  24. /* class类选择器 */
  25. .title {
  26.   color: red; /*!important 使其优先级变道最大*/
  27.   font-weight: bolder;
  28.   font-size: 26px;
  29.   text-align: center;
  30. }
  31. .content {
  32.   color: tomato;
  33.   font-size: 20px;
  34. }
  35. .content-four {
  36.   color: darkslateblue !important;
  37. }
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：好看, 不错, 你是不是也想这样来激励自己呢?
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post