• 售前

  • 售后

热门帖子
入门百科

带你相识CSS根本知识,样式

[复制链接]
六月清晨搅 显示全部楼层 发表于 2021-8-16 11:33:06 |阅读模式 打印 上一主题 下一主题
目录


  • 什么是CSS

    • 在HTML页面中嵌套利用CSS的两种方式
    • 三种方式代码展示
    • 链入外部样式表文件
    • 以下是常用的样式

  • 总结

什么是CSS

CSS(Cascading Style Sheet):层叠样式表语言。
CSS的作用是:
修饰HTML页面,设置HTML页面中的某些元素的样式,让HTML页面更好看。

在HTML页面中嵌套利用CSS的两种方式

第一种方式:在标签内部利用style属性来设置元素的CSS样式,这种方式称为内联界说方式。语法格式:
<标签 style=“样式名:样式值;样式名:样式值;样式名:样式值;…”></标签>
第二种方式:链入外部样式表文件,这种方式最常用。(将样式写到一个独立的xxx.css文件当中,在需要的网页上直接引入css文件,样式就引入了)语法格式:
  1. 这种方式易维护,维护成本较低。
  2.                 xxx.css文件
  3.                         1.html中引入了
  4.                         2.html中引入了
  5.                         3.html中引入了
  6.                         4.html中引入了
复制代码
三种方式代码展示

内联界说方式
  1. <!doctype html>
  2. <html>
  3.         <head>
  4.                 <title>HTML中引入CSS样式的第一种方式:内联定义方式</title>
  5.         <head>
  6.         <body>
  7.                 <!--
  8.                         width        宽度样式
  9.                         heght        高度样式
  10.                         background-color        背景颜色样式
  11.                         display                布局样式(none表示隐藏,block表示显示)
  12.                 -->
  13.                 <div style="width: 300px;height: 300px;background-color: #CCFFFF; display: block;
  14.                 border-color: red;border-width: 3px;border-style: solid"></div>
  15.                 <!--样式还可以这样写
  16.                         border: width style color
  17.                 -->
  18.                 <div style="width: 300px;height: 300px;background-color: #CCFFFF; display: block;
  19.                 border:  thick double yellow;  "></div>
  20.         </body>
  21. </html>
复制代码
样式块方式
  1. <!doctype html>
  2. <html>
  3.         <head>
  4.                 <title>HTML中引入样式的第二种方式:样式块方式</title>
  5.                 <style type="text/css">
  6.                         /*
  7.                                 这是CSS的注释
  8.                         */
  9.                         /*
  10.                                 id选择器
  11.                                 #id{
  12.                                         样式名: 样式值;
  13.                                         样式名: 样式值;
  14.                                         样式名: 样式值;
  15.                                         ........
  16.                                 }
  17.                         */
  18.                         #usernameErrorMsg{
  19.                                 font-size: 12px;
  20.                                 color: red;
  21.                         }
  22.                         /*
  23.                                 标签选择器
  24.                                 标签名{
  25.                                         样式名: 样式值;
  26.                                         样式名: 样式值;
  27.                                         样式名: 样式值;
  28.                                 }
  29.                         */
  30.                         div{
  31.                                 background-color: black;
  32.                                 border: 1px solid red;
  33.                                 width: 100px;
  34.                                 height: 100px;
  35.                         }
  36.                         /*
  37.                                 类选择器
  38.                                 .类名{
  39.                                         样式名: 样式值;
  40.                                         样式名: 样式值;
  41.                                         样式名: 样式值;
  42.                                 }
  43.                         */
  44.                         .myclass{
  45.                                 border: 2px double blue;
  46.                                 width: 400px;
  47.                                 height: 30px
  48.                         }
  49.                 </style>
  50.         </head>
  51.         <body>
  52.                 <!--
  53.                         设置样式字体大小12px,颜色为红色
  54.                 -->
  55.                 <!--<span id="usernameErrorMsg" style="font-size: 12px;color: red">对不起,用户名不能为空!</span>-->
  56.                 <span id="usernameErrorMsg"">对不起,用户名不能为空!</span>
  57.                 <div></div>
  58.                 <div></div>
  59.                 <div></div>
  60.                 <!--class相同的可以认为是同一类标签。-->
  61.                 <br><br><br><br>
  62.                 <input type="text" class="myclass"/>
  63.                 <br><br><br><br><br>
  64.                 <select class="myclass">
  65.                         <option>专科</option>
  66.                         <option>本科</option>
  67.                         <option>硕士</option>
  68.                 </select>
  69.         </body>
  70. </html>
复制代码
链入外部样式表文件

css文件
  1. a{
  2.         text-decoration: none;
  3. }
  4. #baiduSpan{
  5.         text-decoration: underline;
  6.         cursor: wait;
  7. }
复制代码
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>HTML中引入CSS样式的第三种方式:链入外部样式表文件</title>
  6.                 <!--引入css-->
  7.                 <link type="text/css" rel="stylesheet" href="css/1.css"/>
  8.         </head>
  9.         <body>
  10.                 <a href="http://www.baidu.com">百度</a>
  11.                 <span id="baiduSpan">点击我链接百度</span>
  12.         </body>
  13. </html>
复制代码
以下是常用的样式

边框
(1)
  1. div{ border : 1px solid red; }
复制代码
(2)
  1. div{ border-width : 1px; border-style : solid; border-color : red; }
复制代码
潜伏
  1. div{ display : none; }
复制代码
字体
  1. div{ font-size : 12px; color : red; }
复制代码
文本装饰
  1. a{ text-decoration : none; }
复制代码
  1. a{ text-decoration : underline; }
复制代码
列表
  1. ul{ list-style-type : none; }
复制代码
设置鼠标悬停效果
  1. :hover
复制代码
定位
  1. div{ position : absolute; left : 100px; top : 100px; }
复制代码
鼠标小手
  1. div{ cursor : pointer; }
复制代码
总结

本篇文章就到这里了,盼望可以或许给你带来帮助,也盼望你可以或许多多关注草根技术分享的更多内容!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作