html+css+js 零基础入门系列课笔记(第二天)螺钉课堂

什么是css? 层叠样式表,修饰网页样式 css(Cascading style Sheet) 一组格式设置规则,控制web外观样式

2019年1月13日

1 css是什么?

层叠样式表,修饰网页样式
css(Cascading style Sheet) 一组格式设置规则,控制web外观样式

2 如何使用css?

a.通过<div>加id="box"-->head下加<style>下加#box 来令div获取到该样式  (自定义名字来关联)
    <head>
        <title>
            标题:设置颜色
        </title>
        <style type="txet/css">
            #box{
                color: blue;
            }
        </style>
    </head>
    <body>
        <div id="box">设置颜色为蓝色</div>
    </body>

b.可以直接把style代码放入单独的style文件下,即新建一个单独文件夹存放颜色代码文档 <link/>  (常用)
    <head>
        <title>设置颜色</title>
        <link rel="stylesheet" type="text/css" href="../style/05_css_style_box2.css"/>
    </head>
    <body>
        <div id="box2">设置该文字颜色</div>
    </body>

c.直接在html标签的属性中写颜色代码
    <div style="colir:red;">直接在html标签属性中写颜色代码</div>

3 css语法规则? 要使得html标签有具体样式,需要具备哪些条件?

a.style标签或者link标签或者style属性书写正确,关联要正确
b.保证css代码和html代码关联 产生关联的方法有多种(id<---># ) 学习到底有多种方法产生关系
c.告诉浏览器要把html修饰成什么样子。 学习各种样式去修饰html标签

总结: css要学好 1 如何去关联,2 如何去修饰html标签。

书写css的规则:

选择器{
    属性名称:属性值;
    属性名称2:属性值2;
    ...
}

选择器:选择html标签的方法,即在html标签中要设置的标签名称将它命名为什么  比如(#box)将要设置颜色部分标签命名为box
    a.id选择器(#)     id="自定义名称"<---> #自定义名称
    b.类选择器(.)     class="自定义名称"<--->.自定义名称
    c.标签选择器(就是标签)   通过标签名称选择对应的html元素  在style下直接令需要设置颜色的标签取颜色

    目的:找到对应的元素,用括号内元素进行修饰。
    不同点:  id选择器(唯一id):唯一 唯一一个元素被修饰。
             类选择器(class):多次 班级 在同个组里的同学都被修饰。多个元素修改成相同样式,可以出现多次。
             标签选择器(标签):一类标签都被修饰,但比上两种选择器优先级低

    总结:学习以上三种选择器(找元素的方法),就可以查找到网页种的任何元素 (如何去关联已经学完)

    剩下要解决的问题:如何去修饰html?边框,字体,大小,颜色...

4 具体的css规则

1 颜色的表示方式
a.rgb表示模式 r:红色 g:绿色 b:蓝色  (rgb取值范围 0-255)
b.直接设置颜色名称
c.十六进制 (六个数值)#0f0000 (最常用)
d.rgba(红色,绿色,蓝色,透明度(0-1 数值越小越透明))
打赏 帮助到大家 0

共有 0 条评论

You must be logged in to post a comment.