经验总结

  1. 首页 > 生活 > >

day03-CSS( 三 )

生活百科day03-CSS


day03-CSS

文章插图
3.7列表去修饰属性list-style的值为none时，表示去掉默认的修饰
例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>列表去修饰</title><style type="text/css">ul {list-style: none;}</style></head><body><ul><li>三国演义</li><li>红楼梦</li><li>西游记</li><li>水浒传</li></ul></body></html>
day03-CSS

文章插图
4.css三种使用方式
  • 方式1：在标签的style属性上设置css样式
    问题分析：
    • 标签多了，样式多了，代码量庞大
    • 可读性差，维护麻烦
    • css代码没有复用性
    例子
    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>在标签的style属性上设置css样式</title></head><body><div style="width: 300px;height: 100px;background-color: beige">hello,北京</div><br/><div style="width: 300px;height: 100px;background-color: beige">hello,上海</div><br/><div style="width: 300px;height: 100px;background-color: beige">hello,天津</div><br/></body></html>
    day03-CSS

    文章插图
  • 方式2：在head标签中，使用style标签来定义需要的css样式
    例子
    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>在head标签中，使用style标签来定义需要的css样式</title><style type="text/css">div {width: 300px;height: 100px;background-color: beige;}span {border: 1px solid red;}</style></head><body><div>hello,北京</div><br/><div>hello,上海</div><br/><span>hello,span</span><br/></body></html>
    day03-CSS

    文章插图
  • 方式3：把css样式写成单独地css文件，在通过link标签引入（推荐使用）
    例子
    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>引入外部的css文件</title><!-- rel：代表relation，关联的意思 --><!-- type="text/css" 这个属性可以不写 --><!-- href表示要引入的css文件的位置，可以是web的完整路径，也可以是相对路径--><!-- 推荐使用第三种方式--><link rel="stylesheet" type="text/css" href="https://www.huyubaike.com/biancheng/mycss.css"></head><body><div>hello,北京~</div><br/><div>hello,上海</div><br/><span>hello,span</span><br/></body></html>div {width: 200px;height: 100px;background-color: brown;}span {border: 1px dashed blue;}
    day03-CSS

    文章插图
5.css选择器5.1css元素选择器
  1. 最常见的css选择器是元素选择器 。换句话说，文档的元素就是最基本的选择器
  2. css元素/标签选择器通常是某个html元素，比如p、h1、a等
  3. 元素选择器会修饰所有的对应的元素
例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>元素选择器</title><style type="text/css">h1 {color: red;}p {color: blue;}</style></head><body><h1>一只大猫咪</h1><p>一只小猫咪</p></body></html>

经验总结扩展阅读


上一篇：a类火灾应选用哪类灭火器

下一篇：2023年9月24日适合坐游轮吗 2023年农历八月初十宜坐游轮吗