CSS——基本样式

CSS

定义：层叠(级联)式样式表
功能：美化网页

样式:
style

颜色相关样式

前景色
color：单词
|RGB(红色，绿色，蓝色 0~255)
|16进制值(#00FF00(十六进制红绿蓝百分比))
|RGBA(红，绿，蓝，0~1(透明度))；

白色 RGB(255,255,255)

黑色 RGB(0,0,0)
背景色

backgroud-color(写法类似于color)

背景图片
backgroud-repeat图片是否重复

backgroud-image:url(图片地址)；
backgroud-repeat：repeat|no-repeat|repeat-x|repeat-y

盒子模型

margin 外间距
border 边框

border-left 边框宽度边框线类型边框颜色

padding 内间距

padding-left 左边框
padding-right 右边框
padding-top 上
padding-bottom 下

    <div style="background: #9cdcfe;height: 60px;padding-left: 60px;
    border: black 2px solid;margin-bottom: 10px">
         内容1
    </div>

    <div style="background: #9cdcfe;height: 60px;padding-left: 60px;
    border: black 2px solid">
        内容2
    </div>

定位方式

div
position:absolute; 绝对定位
左边原点在左上角
left： x坐标
top：y左边
z-index:z坐标取值越大，越靠近上层

    <div style="background-color: rgba(0,255,0,0.5);width: 100px;height: 100px;
    position: absolute;left: 0;top: 0;z-index: 30"></div>

    <div style="background-color: rgba(255,0,0,1);width: 100px;height: 100px;
    position: absolute;left: 10px;top: 0;z-index:20"></div>

字体相关

字体大小：font-size
选择字体：font-family(电脑上必须事先有这个字体)
倾斜:font-style: italic;
加粗:font-weight: bold;
贯穿线：text-decoration: line-through
下划线：text-decoration: underline

    <p style="font-style: italic;font-weight: bold">内容</p>
    <p style="text-decoration: underline">原价 998</p>

##显示隐藏
display：none 隐藏
block 显示

   <p style="display: none">显示信息</p>

样式表

在<head></head>里定义一个有名称的样式表，以后需要用样式的时候使用class=“样式名”

    <!--样式表-->
    <style>
        .c1{color: darkcyan;background-color: #9cdcfe;}
    </style>

<p class="c1">段落1</p>

名字的更专业名称叫：选择器（selector）
类选择器
上面的例子使用的就是类选择器

ID选择器
id的取值不能重复，id不能以数字开头

    <style>
        .c1{color: darkcyan;background-color: #9cdcfe;}
        #p1{font-size: larger}
    </style>

<p id="p1">段落2</p>

元素选择器

span{background-color: #569cd6}

    <span>aaa</span>
    <span>bbb</span>
    <span>ccc</span>

选择器的优先级

id选择器>class选择器>元素选择器

同级选择器后定义的优先级高；
若样式内部添加了！important，则样式的优先级最高

父子选择器

     /*找到一个p标签并且它的父亲是div*/
        div>p{background-color: darksalmon}

祖先后代选择器

祖先标签后代标签

div p {background-color: red}

<div>
    <div>
        <p>段落1</p>
        <p>段落2</p>
    </div>
    <p>段落3</p>
</div>
    <p>段落4</p>

伪类选择器

按钮鼠标移入改变样式，鼠标移出还原样式

:hover

#btn1:hover{background-color: #9cdcfe}

<input id="btn1" type="button\" value="按钮">

tr:hover{background-color: darkgrey}

<table border="1" width="100%">
    <tr>
        <td>a</td>
    </tr>
    <tr>
        <td>b</td>
    </tr>
    <tr>
        <td>c</td>
    </tr>
</table>

:frist 匹配选中的第一个
:last 匹配选中的最后一个
:focus 聚焦

盒子模型

定位方式

字体相关

样式表

猜你喜欢