经验总结

  1. 首页 > 生活 > >

day03-CSS

生活百科day03-CSS

CSS1.css介绍css指的是层叠样式表（cascading style sheets）
官方文档：https://www.w3school.com.cn/css/index.asp

  • 为什么需要css？
  1. 在没有css之前，我们想要修改html元素的样式需要为每个html元素单独定义样式属性，费心费力 。所以css就出现了 。
  2. 使用css将html页面的内容与样式分离，提高web开发的工作效率（针对前段开发）
  • css快速入门-例子
    创建html文件完成如下网页显示：
    day03-CSS

    文章插图
    day03-CSS

    文章插图
    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>css快速入门</title><!-- 1.在head标签类出现了<style type="text/css"> </style>2.表示要写css内容3.div{}表示对div元素进行样式的指定，div就是一个选择器（元素/标签选择器）4.width:300px;...等表示对div样式的具体指定，可以有多个5.如果有多个使用分号;分开即可，最后的属性后面可以不用分号（建议写上）6.当运行页面时，div就会被div{}渲染，修饰7.在调试css时，可以通过修改颜色或者大小来看样式是否生效8.css的注解是/* */,快捷键是ctrl+/--><style type="text/css">div {width: 300px;height: 100px;background-color: beige;}</style></head><body><div>hello,北京</div><br/><div>hello,上海</div><br/><div>hello,天津</div><br/></body></html>
    day03-CSS

    文章插图
2.css语法
  1. css语法可以分成两部分：（1）选择器（2）声明
  2. 【day03-CSS】声明由属性和值组成，多个声明之间用分号分隔
    day03-CSS

    文章插图
  3. 最后一条声明可以不加分号（建议加上）
  4. 一般每行只描述一个属性
  5. css注释：/*注释内容*/，类似java，快捷键是ctrl+/
3.css常用样式3.1字体颜色和边框
  • 字体颜色
    颜色可以写颜色名，比如green；也可以写rgb值，比如rgb(200,200,200)；十六进制表示值，比如#708090
    day03-CSS

    文章插图
    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>颜色</title><style type="text/css">div {/*三种方式指定颜色：1.英文red;2.十六进制 ##ff7d44;3.三原色rgb(255,0,0);*//*color: red;*//*color: rgb(255,0,0);*/color: #ff7d44;}</style></head><body><div>一只小猫咪</div></body></html>
    day03-CSS

    文章插图
  • 边框：属性border
    例子
    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>边框</title><style type="text/css">div {width: 300px;height: 100px;border: 1px solid blue;/*属性的值的顺序是随意的*/}</style></head><body><div>一只小猫咪</div></body></html>
    day03-CSS

    文章插图
3.2宽度和高度
  • 宽度width和高度height的值，可以用像素：100px，也可以是百分比：50%
    /*width: 300px;*/width: 50%;/*百分比*/
使用百分比可以自适应浏览器的宽度和高度
3.3背景颜色和字体样式

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

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