正文

css常用属性

Repeinsi  2022-02-17  105

关键词：

1.1 设置样式的七个选择器

　　1、其中选择器介绍

　　　　　　1. 直接在标签里的style标签写样式

　　　　　　2. id选择器（名字以“#”号开头）：只能被某一个标签使用

　　　　　　3. class选择器（名字以“.”号开头）：可以被多个标签同时引用

　　　　　　4. 标签选择器：比如你设置一个div标签选择器，那么所有div默认都会使用这个样式

　　　　　　5. 层级选择器（用空格分隔）： span div{} 只有span中定义的div才会应用这个样式

　　　　　　6. 组合选择器（用逗号分隔）： #i1，#i2{} 让id=i1，id=i2的都应用这一个样式

　　　　　　7. 属性选择器： input[type='text']{width: 100px;height: 200px}找到input标签中的type="text"标签，应用这个样式

　　　　　　　　属性选择器作用：对选择到的标签再通过属性进行一次筛选

　　　　　　注：七种选择器的优先级

　　　　　　　　1. 标签上的style优先

　　　　　　　　2. 其他都是按找head中style中定义的先后顺序：越后定义优先级越高

　　2、七种选择器代码展示

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /* 1. id选择器 只能被某一个标签使用*/
        #i1{
           background-color: #2459a2;
            height: 48px;
        }
        /* 2. class选择器 可以被多个标签同时引用*/
        .c1{
           background-color: olivedrab;
            height: 48px;
        }
        /* 3. 标签选择器 这个作用是指定所有div默认都会使用这个样式*/
        div{
            background-color: black;
            color: white;
        }
        /* 4. 层级选择器 只有span中定义的div才会应用这个样式*/
        span div{
            background-color: red;
            color: white;
        }
        /* 5. 组合选择器 让id=i1，id=i2的都应用同一个样式*/
        #i1，#i2{
           background-color: #2459a2;
            height: 48px;
        }
        /* 6. 属性选择器 找到input标签中的type="text"标签，应用这个样式*/
        input[type='text']{width: 100px;height: 200px}
    </style>
</head>
<body>
   <div style="height: 48px; background-color: red">style标签写样式</div>
    <div id="i1">id选择器</div>
    <div class="c1">class选择器</div>
    <div>标签选择器</div>
    <span><div>关联选择器</div></span>
    <input type="text">     <!--属性选择器-->
</body>
</html>

七种选择器代码展示

1.2 css常见属性浅析

　　1、让div中文字居中

　　　　　　<div style="line-height: 400px;text-align: center">

　　　　　　1）line-height: 400px 垂直方向标签高度是400（即文字距离上下边距都是200px）

　　　　　　2）text-align: center 文字水平居中

　　2、css边框

　　　　1. 边框常设置的几个属性

　　　　　　　　1）边框颜色：border-color:#000

　　　　　　　　2）边框厚度（宽度）：border-width:1px

　　　　　　　　3）border边框样式：border-style:solid

　　　　　　　　　　　　double : 　双线边框。两条单线与其间隔的和等于指定的border-width值

　　　　　　　　　　　　solid : 　实线边框（常用）

　　　　　　　　　　　　dashed：虚线

　　　　2. 设置一个div标签的边框举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .c1{
            width: 200px;
            height: 200px;
            border-radius: 5px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="c1">   </div>
</body>
</html>

设置div边框

　　2、css边距：margin & pading

　　　　1. margin与pading区别

　　　　　　　　1). margin：在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离

　　　　　　　　2). pading：在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。

　　　　2. padding语法

　　　　　　　　padding-top:10px; /*上边框留空白*/

　　　　　　　　padding-right:10px; /*右边框留空白*/

　　　　　　　　padding-bottom:10px; /*下边框留空白*/

　　　　　　　　padding-left:10px; /*左边框留空白

　　　　3. margin语法

　　　　　　　　margin-top:10px; /*上边界*/

　　　　　　　　margin-right:10px; /*右边界值*/

　　　　　　　　margin-bottom:10px; /*下边界值*/

　　　　　　　　margin-left:10px; /*左边界值*/

　　　　4. margin和padding的区别用图表示为

　　3、css之float样式

　　　　　　1. 作用：让块级标签不必占用一整行也可以堆叠

　　　　　　2. 说明：两个div原本是堆叠的，各占一行，这里利用float让他们一个做对齐，一个右对齐，这样两个div宽度加一起

　　　　　　不大于%100，就会叠加到一行，如果超过%100就会分行

　　　　　　3. <div style="clear:both"></div> #解决float标签随意飘动问题，并覆盖父边框

<body>
    <div style="width: 20%;background-color: red;float: left">1</div>
    <div style="width: 80%;background-color: black;float: right">2</div>
</body>

float使用

　　4、css之display样式

　　　　1. 行内标签和块级标签作用说明：

　　　　　　　　1）行内标签：无法设置高度，宽度，padding，margin，行内标签自己有多宽就占多宽

　　　　　　　　2）块级标签：块级标签可以设置高度，宽度，padding，margin，默认占父级标签高度宽度的百分百

　　　　2. display四个语法解释：

　　　　　　1. display: inline              ----   将块级标签变成行内标签

　　　　　　2. display: block               ----   将行内标签变成块标签

　　　　　　3. display: inline-block        ----   让标签同时具有块级标签和行内标签的属性，即具有

　　　　　　　　　　　　　　　　　　　                Inline默认自己有多少占多少

　　　　　　　　　　　　　　　　　　　                又有block可以设置高度，宽度，padding,margin

　　　　　　4. display: none　　　　　　　　----   如果一个标签标注了这个，那么标签不会在页面显示

　　5、position

　　　　1. position常用属性

　　　　　　　　1. position: fixed; :指定某个div固定到浏览器窗口的固定位置（如底部：不会随滑轮移动）
　　　　　　　　2. position: relative 和 position: absolute ：指定内部div相对外部div位置
　　　　　　　　3. opacity: 0.5; ：多层堆叠时指定透明度，数值（0-1）数值越大透明度越小
　　　　　　　　4. z-index:9 ：多层时层级顺序，值越大显示就在最上面

　　　　2. position: fixed

　　　　　　　　作用：将div固定到浏览器窗口固定位置（比如固定页面头部）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .header{
            height: 40px;
            background-color: #dddddd;
            width: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            right: 0px;

        }
    </style>
</head>
<body>
    <div class="header"></div>
</body>
</html>

固定页面头部

　　　　3. position: relative 和 position: absolute

　　　　　　　　作用：指定内部div与外部div的相对位置（比如让内部div在外部div左下角）

<div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">
    <div style="position: absolute;left: 0;bottom: 0;width: 50px;height: 50px;background-color: black;">
    </div>
</div>

使内部小div固定到大div的左下角

　　　　4. opacity: 0.5; 和 z-index:9

　　　　　　　　作用： div三层堆叠时，指定显示顺序和遮挡的透明度
　　　　　　　　应用场景： 当点击登陆按钮时会出现三层界面，第二层遮挡最里面那层使它不能再操作，最外层可操作

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
</head>
<body>
    <!--3 最外面一层白色-->
    <div style="z-index:10;position: fixed;top: 50%;left: 50%;
    margin-left: -250px;margin-top: -200px;
    background-color: white;height: 400px;width: 400px;"></div>

    <!--2 中间层黑色，用于遮挡最里层-->
    <div style="z-index:9;position: fixed;background-color: black;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0.5;
    "></div>

    <!--3 最里层，一般是还未点击弹框时的页面-->
    <div style="height: 5000px;background-color: green;">
        afdgdfds
    </div>
</body>
</html>

三层div遮盖

　　6、overflow

　　　　　　1. overflow: hidden 如果图片大小大于div大小隐藏超过的那部分，而不是将div撑开
　　　　　　2. overflow: auto 如果图片大于div大小就会出现滚动条，可滚动看

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
</head>
<body>
    <div style="width: 200px;height: 200px;overflow: auto">
        <img src="aa.jpg">
    </div>
    <div style="width: 200px;height: 200px;overflow: hidden">
        <img src="aa.jpg">
    </div>
</body>
</html>

overflow使用

　　7、hover

　　　　　　.menu:hover /*当鼠标移动到当前那标签上时以下css属性才会生效*/

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .pg-header{
            position: fixed;
            right: 0;
            left: 0;
            top: 0;
            height: 48px;
            background-color: #2459a2;
            line-height: 48px;
        }

        .w{
            width: 980px;
            margin: 0 auto;
        }

        .pg-header .menu{
            display: inline-block;
            padding: 0 10px;
            color: white;
        }

        /*当鼠标移动到当期那标签上时以下css属性才会生效*/
        .pg-header .menu:hover{
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="pg-header">
        <div class="w">
            <a class="logo">Logo</a>
            <a class="menu">42区</a>
            <a class="menu">段子</a>
            <a class="menu">1024</a>
        </div>
    </div>
</body>
</html>

hover鼠标移动到上面边上

1.3 css布局中常用方法

　　1、去除标签中默认边距

　　　　　　*{ margin: 0; padding: 0;}

　　2、去除链接文字下的横杠
　　　　　　a{ text-decoration:none;}

　　3、去除li中文字前的点

　　　　　　ul li{ list-style-type: none;}

　　4、设置头部固定在窗口顶部，并水平居中

header .title-top{
    width: 100%;
    min-width: 1024px;
    height:40px;
    text-align: center;
    position: fixed;
    top:0px;
    z-index: 1000;
margin: 0 auto;
}

设置头部固定在窗口顶部，并水平居中

　　5、字体

body{
    font-family: Tahoma, 宋体, 微软雅黑, 幼圆, "Microsoft Yahei", Arial;
    font-size: 12px;
}

字体

css样式常用属性整理

...大家整理了一个和HTML标签密不可分的知识要点--《CSS样式常用属性》　　*******CSS常用属性*********　　z-index:　　auto(默认值)　　检索或设置对象的层叠顺序。　　并级的对象，此属性参数值越大，则被层叠在最上面。　　如两个... 查看详情

css常用属性

包含头文件：<?phprequire_once("./connect.php")　　背景色：body{ background-color :#556677}宽：{width:1000px}box类居中：.box{margin：0pxauto;} 　　　　margin 简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值... 查看详情

css3常用属性

CSS3动画属性（Animation）@keyframes//规定动画。animation//所有动画属性的简写属性，除了animation-play-state属性。animation-name//规定@keyframes动画的名称。animation-duration//规定动画完成一个周期所花费的秒或毫秒。animation-timing-function//规定... 查看详情

常用的css属性

CSS常用属性：字体属性：(font)大小font-size:x-large;(特大)xx-small;(极小)一般中文用不到，只要用数值就可以，单位：PX、PD样式font-style:oblique;(偏斜体)italic;(斜体)normal;(正常)行高line-height:normal;(正常)单位：PX、PD、EM粗细font-weight:bold;(... 查看详情

css3常用属性

CSS是我们常用的控制网页样式和布局的一种标准。CSS3是最新的CSS标准。 CSS3被拆分为“模块”，旧的规范也已经拆分为小的块，同时还增加了新的属性。一些比较重要的CSS3的模块：选择器、盒模型、背景和边框、文字特效、... 查看详情

css常用的属性命名

页头：header 如：#header{属性:属性值;}或.header{属性:属性值;},也许你需要了解class与id区别及用法登录条：loginBar 标志：logo 侧栏：sideBar&nbs 查看详情

css常用属性

布局常用样式属性：width设置元素(标签)的宽度，如：width:100px;height设置元素(标签)的高度，如：height:200px;background设置元素背景色或者背景图片，如：background:gold;设置元素背景色为金色border设置元素四周的边框，如：border:1pxsolid... 查看详情

常用css属性

1.让文字不可选中-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;2.safari点击区域阴影去除-webkit-tap-highlight-color:rgba(0,0,0,0); 查看详情

css常用属性

1. 字体font-style:normal/italic/oblique; /*字体样式*/font-size:numpx; /*字体大小*/font-weight:normal/bold; /*字体粗细*/text-decoration:normal/italic/oblique/bold/overline/underline/strikou 查看详情

css常用属性

1.颜色属性：color属性定义文本的颜色　　方式：1）color：green　　　　　2）color：#ff6600　　　　　3）简写式 color：#f60　　　　　4）RGB color：rgb（225,225,225）　　　　　5）RGBAcolor：rgba（225,225,225,0）　　　　　　　外加... 查看详情

常用的css属性

1.color颜色属性值:颜色单词比如：color：red；2.字体大小font-size:12px;属性值是数字，不要带小数；px是像素单位3.字体系列、字形font-family属性值"微型雅黑"4.字体样式font-style标准字体:normal 斜体:itelic5.字体的粗细font-weig... 查看详情

css常用属性

盒子模型：1，外边距（margin）、边框（border）、内边距（padding）上下内边框左右内边框3，padding：上右下左4，margin：同上5.border：大小样式颜色；6.bor 查看详情

css常用属性

文本属性　　一、设置文字大小　　属性：font-size　　文字的单位：px：像素　　　　　　　　pt：磅，一般用在印刷领域　　　　　　　　em：相对大小，相对于父元素的字体大小。　　　　　　　　　　em的应用：由于em的字... 查看详情

css常用样式–背景属性

一、背景颜色background-color属性名：background-color作用：在盒子区域添加背景颜色的修饰加载区域：在border及以内加载背景颜色属性值：颜色名、颜色值<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"... 查看详情

css常用属性

1.1设置样式的七个选择器　　1、其中选择器介绍　　　　　　1.直接在标签里的style标签写样式　　　　　　2.id选择器（名字以“#”号开头）：只能被某一个标签使用　　　　　　3.class选择器... 查看详情

css3常用属性--边框背景

...以很方便的做出种种炫酷的效果，接下来，我将例举一些常用的CSS3的属性。　　border-radius：圆角。border-radius:50px;/*四个角的圆角均为50px*/border-radius:50px100px;/*左上右下的圆角是查看详情

css样式链接和文字常用属性

行内：<divstyle="color:red;"></div>内嵌<style>div{background-color:red;}</style>外部引用<linkrel="stylesheet"(样式表)href="./xxx.css"> xxx.css文件： div{color:red}CSS文字属性color 查看详情

css中的常用属性

一CSS文字属性：color:#999999;/*文字颜色*/font-family:宋体,sans-serif;/*文字字体*/font-size:9pt;/*文字大小*/font-style:itelic;/*文字斜体*/font-variant:small-caps;/*小字体*/letter-spacing:1pt;/*字间距离*/line-height:200%;/*设置行高*/font 查看详情