css选择器编写及常用样式

最新推荐文章于 2022-06-10 20:25:14 发布

weixin_30809333

最新推荐文章于 2022-06-10 20:25:14 发布

阅读量198

点赞数

原文链接：http://www.cnblogs.com/lybpy/p/8157834.html

版权

css就是在style中编写样式，有三种写法：

1、在body中的标签中设置style属性，再在style中设置样式

<div style="background-color: #0e84b5;height: 48px">自强不息</div>　　#设置块级标签div背景色和高度

2、在head中写上style标签，并在其中设置样式

（1）id选择器，#id值{ 样式 } 或 #id值1，#id值2，#id值3{ 样式 }　　#少用

（2）class选择器，可重复，.class值{ 样式 }

（3）标签选择器，如div{ 样式 } 设置所有的div标签样式

（4）层级选择器，如div span{ 样式 }　　#设置最底层标签的样式

（5）组合选择器，使用，即逗号分割选择器　　#各选择器都设置样式

（6）属性选择器，选择器[ 属性=属性值 ]{ 样式 }　　#属性也可自定义

注意：class可以设置多个属性，用空格隔开；样式优先级，变迁上的style第一，越靠近标签越优先

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1,#i2,#i3{
            background-color: red;
            height: 40px;
        }
        .aaa{
            background-color: green;
            height:40px;
        }
        div span{
            background-color: #0000aa;
        }
        input[type='text']{height: 20px;width: 20px;}
    </style>
</head>
<body>
    <div style="background-color: black;height: 40px;">样式在标签中</div>
    <div id="i1" >选择id设置样式</div>
    <div id="i2" >2</div>
    <h2 id="i3" >3</h2>
    <div class="aaa">选择class设置样式</div>　　　　#class中可以写多个如class=“aa  bb”
    <div class="aaa">2 <span>层级选择器</span> 3</div>
    <h2 class="aaa">3</h2>
    <input type="text" name="eee">
</body>
</html>

3、创建css文件，在html文件中引入

ys.css　　注意：不用写style了

#i1,#i2,#i3{
            background-color: red;
            height: 40px;
        }
        .aaa{
            background-color: green;
            height:40px;
        }
        div span{
            background-color: #0000aa;
        }
        input[type='text']{height: 20px;width: 20px;}

html文件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="ys.css">　　#引入
</head>

常用样式：

边框border、高、宽、字体、居中

<div style="border: 1px solid red">border是边框，边框线宽1像素，实体，红色</div>

<div style="height: 40px;
    width: 100%;
    border: 1px dotted blue;
    font-size: 20px;
    text-align: center;
    line-height: 40px;
    font-weight: 300">
    高度40px，此时高度无限不用%；宽200px或80%，占总宽80%；边框虚线；字体大小；水平居中;
    竖直居中；字体加粗程度或写bold加粗
</div>

转载于:https://www.cnblogs.com/lybpy/p/8157834.html