zoukankan      html  css  js  c++  java
  • 范仁义css3课程---1、认识css样式

    范仁义css3课程---1、认识css样式

    一、总结

    一句话总结:

    知道css在网页制作中扮演的角色,知道css是什么,掌握css代码的语法

    1、css是什么?

    CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。

    2、使用css有哪些好处?

    将css代码与html代码分离,更好的操作、管理以及复用
    通过定义某个样式,可以让不同网页位置的文字有着统一的字体、字号或者颜色等。

    3、css代码语法?

    语法:选择符{属性:值}
    实例:p{color:red;}

    4、css中设置字体大小用什么属性?

    用font-size属性:例如 font-size:12px;

    5、css中设置字体颜色用什么属性?

    用color属性:例如 color:red;

    6、写css代码需要注意什么?

    1、写css的时候,标点符号都是英文状态下的标点符号
    2、属性和值之间用英文状态下的冒号(:),不同属性之间用英文状态下的分号(;)

    二、认识css样式

    博客对应课程的视频位置:1、认识css样式
    https://www.fanrenyi.com/video/10/28

    1、回顾html,css,js在网页制作中扮演的角色

    1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。

    2. CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

    3. JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。

    2、认识css样式

    CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。

    层叠的意思:一个标签应用的同一种样式(比如设置字体)可能有多个,以权值最高的且最近的样式为准

    css3是css的最新的版本号,里面新加了一些功能,比如动画、3d转换等


    如下列代码:
    p{
    font-size:12px;
    color:red;
    font-weight:bold;
    }
    使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字有着统一的字体、字号或者颜色等。

    3、使用css的好处

    将css代码与html代码分离,更好的操作、管理以及复用

    通过定义某个样式,可以让不同网页位置的文字有着统一的字体、字号或者颜色等。

    4、css代码语法

    css 样式由选择符和声明组成,而声明又由属性和值组成
    选择符{属性:值}
    p{color:red;}
    选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成红色,而其他的元素(如ol)不会受到影响。
    声明:在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔。当有多条声明时,中间可以英文分号“;”分隔,如下所示:
    p{font-size:12px;color:red;}

    5、注意点

    1、写css的时候,标点符号都是英文状态下的标点符号

    2、属性和值之间用英文状态下的冒号(:),不同属性之间用英文状态下的分号(;)

    三、课程代码

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>认识css样式</title>
     6     <style>
     7         p{
     8             font-size:12px;
     9             color:green;
    10             font-weight:bold;
    11         }
    12     </style>
    13 </head>
    14 <body>
    15     <p style="color: red;">这是一个很帅很拉风的代表2020年会幸运的p标签</p>
    16     <a href="">我是a标签</a>
    17     <p>这是一个别致的p标签</p>
    18 </body>
    19 </html>

    参考:
    史上最全的HTML、CSS知识点总结,浅显易懂。_HTML,CSS,Javaweb_编程小石头-CSDN博客
    https://blog.csdn.net/qiushi_1990/article/details/40260447

    菜鸟学院:css、css3手册:https://www.runoob.com/css/css-tutorial.html

     
  • 相关阅读:
    client-go和golang源码中的技巧
    使用Prometheus监控snmp
    kubernetes client-go解析
    go 语言的一个赋值操作
    使用Prometheus监控bind9的DNS服务
    验证Prometheus alertmanager邮件发送
    JS 监听浏览器各个标签间的切换
    通过案例理解position:relative和position:absolute
    浏览器的统一指针事件:Pointer Event
    Chrome浏览器读写系统剪切板
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12113967.html
Copyright © 2011-2022 走看看