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

拿到设计师设计好的网页设计图-->分析思路(搭建网页结构 html)-->css修饰网页结构 1 分析套盒子,每层与外层之间的关系 2 写html基本框架 3 使用css进一步修饰网页内部元素结构

2019年1月14日

4 具体的css规则

4.1 颜色的表示方式

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

4.2 边框的相关属性

a.单独设置边框的宽度风格颜色。
    <head>
        <title></title>
        <style>
            .box{
                width:100px;
                height:100px;
            <!-- 单独设置边框的不同属性 -->
                border-width:4px;
                border-style:solid;
                border-color:red;
            }
        </style>
    </head>
    <body>
    <div class="box"></div>
    </body>

b.以上单独设置边框不同属性的代码简写成一条为第二种方法
    <head>
        <title></title>
        <style>
        .box2{
            width:100px;
            height:100px;
            <!-- 将border的个别属性写在一行代码里 -->
            border:4px solid blue;
        }
        </style>
    </head>
    <body>
        <div class="box2"></div>
    </body>

c.单独设置某条边的方法
    不同的框: left:左边框线,right:右边框线,top:上边框线,bottom:下边框线。
    常用的风格:solid:实线,dotted:点线,dashed:虚线。
    <style>
        .box{
            width:100px;
            height:100px;
            <!-- 设置不同的边只需要修改下方"left"所代表的英文 -->
            border-left:4px solid red;
        }
    </style>

d.设置边框的圆角与变成圆
    圆角边框:增加一行代码:border-radius:10px;---所有角均为10px
            (四种方式)  border-radius:10px(上左 下右) 20px(上右 下左);---对角分别为10px和20px
                        border-radius:10px(上左) 20px(上右 下左) 30px(下右);
                        border-radius:10px(上左) 20px(上右) 30px(下右) 40px(下左); 顺时针
    圆与椭圆:增加一行代码:border-radius:50%;  (必须为正方形时50%才为圆,长方形时50%为椭圆)

4.3背景相关的属性

a.设置背景颜色与图片     (background 背景)
    (background-color 背景颜色)
    (background-img:url(./img/head.jpg); 背景图片)

b.设置背景填充颜色或图片的属性
    background-color:背景颜色
    background-image:背景图片
    background-repeat:背景是否重复
    background-position:背景位置

    <head>
        <title></title>
        <style>
            #box{
                width:400px;
                height:400px;
                <!-- 设置背景图片的地址 -->
                background-img:url(./img/head.jpg);
                <!-- 设置盒子容器的边框 可以不设置 -->
                border:4px dashed gray;
                <!-- 设置背景图片是否在容器中重复 即重复填充 -->
                <!-- repeat 重复,no-repeat 不重复,repeat-x x轴重复,repeat-y y轴重复 -->
                background-repeat:no-repeat;
                <!-- 设置背景图片在盒子中的位置 -->
                <!-- 10px(x轴向右平移10像素) 20px(y轴向下平移20像素) -->
                background-position:10px 20px;

                <!-- 以下为设置背景填充颜色(不设置就是没有填充颜色)、图片地址、重复、位置简写代码 -->
            }
            #box2{
                width:100px;
                height:50px;
                broger:4px solid gray;
                background:yellow url("./img/head.jpg") no-repeat 10px 20px;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
        <div id="box2"></div>
    </body>

4.4字体相关的属性
font-size:字体大小    (font-size:60px;)
color:字体颜色       (color:red;)
font-weight:字体粗细  (font-weight:bold;)
font-family:字体类型  (font-family:"微软雅黑",serif;)

4.5文本相关的属性
text-align :center;水平居中
line-height: 垂直居中,数值等于文本框的高度(line-height:50px;)(也可用于行间距)
text-indent: 首行缩紧 (text-indent:50px;)
letter-spacing:单词间距(letter-spacing:20px;)

总结:

1 css是什么?(html修饰代码)css有什么用?(修饰html 使其内容更好看)
2 css如何去使用?(通过body与head关联)如何去找对应html元素?如何去修饰这个元素?

找元素的方法-->css选择器 (id 类 标签)
掌握css的相关属性 颜色 边框 背景 字体 文本

课后练习:

拿到设计师设计好的网页设计图-->分析思路(搭建网页结构 html)-->css修饰网页结构
1 分析套盒子,每层与外层之间的关系
2 写html基本框架
3 使用css进一步修饰网页内部元素结构
打赏 帮助到大家 0

共有 0 条评论

You must be logged in to post a comment.