前端入门之CCS 2 选择器优先级,调节标签样式,字体属性,文本属性,背景, 边框,画圆,display属性,盒子模型,浮动(clear属性),溢出属性,定位,z-index,透明度

选择器的优先级问题

　　1.选择器相同 就近原则

　　2.选择器不同
　　　　行内 > id选择器 > 类选择器 > 标签选择器

　　除此之外还可以通过添加 !important方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护。

　　万不得已可以使用!important

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <style>-->
<!--        p {-->
<!--            color: red;-->
<!--        }-->
<!--    </style>-->
<!--    <link rel="stylesheet" href="mycss.css">-->
    <style>
        /*.c1 {*/
        /*    color: blue;*/
        /*}*/
        /*p {*/
        /*    color: deeppink;*/
        /*}*/
        #d1 {
            color: red;
        }
    </style>
</head>
<body>
<!--<p style="color: aqua">今天周五啦 马上就要放假了</p>-->
<!--1.选择器相同  引入方式不同    就近原则-->
<p id="d1" class="c1" style="color: yellow">今天周五啦 马上就要放假了</p>
<!--2.选择器不同  引入方式相同-->
</body>
</html>

以下为mycss.css

/*p {*/
/*    color: green;*/
/*}*/
#d1 {
    color: red;
}

如何调节标签样式
宽和高

　　长宽 只能给块儿级标签设置
　　行内标签是无法设置长宽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height:400px;
        }
        span{       /*行标签无法修改长宽*/
            width: 200px;
            height: 400px;
        }
    </style>
</head>
<body>
<div>
    效率第一
</div>
<span>
    坚持就是胜利
</span>
</body>
</html>

字体属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            font-family: ‘Consolas‘, ‘Monaco‘, ‘Bitstream Vera Sans Mono‘, monospace;   /*字体*/
            font-size: 48px;    /*大小*/
            font-weight:bold;   /*加粗*/
            color: rgba(255,103,0,0.4);
        }
    </style>
</head>
<body>
<p>how are you I am fine thankyou</p>
</body>
</html>

文字属性

缩进与水平对齐方式对行标签无效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            /*text-align: center;*/
            /*text-decoration: underline;*/
            /*text-decoration: overline;*/
            text-decoration: line-through;
            font-size: 16px;    /*字体大小*/
            text-indent: 32px;
        }
        a{
            text-decoration: none;  /*取消下划线*/
            color: green;
        }
    </style>
</head>
<body>
<p>今天天气真的不错</p>
<a href="">点我</a>
</body>
</html>

背景属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*div{*/
        /*    background-color: black;    !*背景*!*/
        /*    color: white;   !*字体颜色*!*/
        /*}*/
        .c1{
            width:400px;
            height: 400px;
            /*background-color: grey;*/
            /*background-image: url("宝马i6.jpeg");*/
            /*background-repeat: no-repeat;*/
            /*background-position: 100px 10px; !*第一个调节左右  第二个调节上下*!*/
            /*支持简写*/
            background: center center url("宝马i6.jpeg") yellow no-repeat;

        }
    </style>
</head>
<body>
    <div>
        今天是周五
    </div>
<div class="c1"></div>
</body>
</html>

背景图片应用案例(类似小米浏览器的广告显示...页面滚动，广告不动，在最下面)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            background-image: url("宝马i6.jpeg");
            background-attachment: fixed;   /*固定图片,页面移动，图片不动*/
        }
    </style>
</head>
<body>
<div style="height: 500px;background-color: red"></div>
<div style="height: 500px;background-color: gray"></div>
<div style="height: 500px;" id="d1"></div>
<div style="height: 500px;background-color: yellow" ></div>
</body>
</html>

边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            /*border-style: dotted;*/
            /*border-color: red;*/
            /*border-width:10px;*/
            /*border-left: solid; !*左面设置为实线*!*/
            /*border-right: dashed;   !*左面设置为矩形虚线*!*/
            /*border-top: dotted; !*左面设置为点状虚线*!*/
            /*border-bottom: solid;*/
            /*border-left-color: deeppink;*/
            /*!*边框有四边 每一边都可以设置独有的样式 颜色 粗细*!*/

            /*简写*/
            border:solid 3px red;   /*只要把参数写进去就可以  不需要考虑顺序*/
        }
        div {
            height: 500px;
            width: 500px;
            border: 3px solid red;
        }
        span {
            height: 200px;
            width: 200px;
            border: 5px solid green;
        }
    </style>
</head>
<body>
<p>圣诞节过完了</p>
<div>接下来就是元旦</div>
<span>然后就是春节</span>
</body>
</html>

画圆

将border-radius设置为长或高的一半即可得到一个圆形。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height:200px;
            width:200px;
            border-radius:50%;  /*半径*/
            background-image: url("111.png");
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

display属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="height:50px;width:50px;background-color: red;display: inline">aaa</div>
<div style="height: 50px;width:50px;background-color: green;display: inline">bbb</div>
<span style="background-color: red;height: 100px;width: 100px;display: inline-block">span</span>
<span style="background-color: green;height: 100px;width: 100px;display: inline-block">span</span>
<!--inline-block能够让一个标签即有快二级标签可以设置长宽的特点 又有行内标签在一行展示的特点-->
<div>div1</div>
<div style="display: none">div2</div>
<!--<div style="visibility: hidden">div2</div>-->
<div>div3</div>

<!--display: none隐藏标签 并且标签所占的位置也要让出来-->
</body>
</html>

盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;  /*取消body标签自带的8px的外边距*/
        }
        /*div {*/
        /*    border: 5px solid red;*/
        /*}*/
        .c1 {
            height: 100px;
            width: 100px;
            background-color: red;
            /*margin-bottom: 50px;*/
            /*margin-left: 100px;*/
            /*margin: 20px;  !*上下左右*!*/
            /*margin: 20px 40px;  !*第一个是上下   第二个是左右*!*/
            /*margin: 20px 40px 60px;  !*上   左右   下*!*/
            /*margin: 20px 40px 60px 80px;  !*上  右 下 左  顺时针*!*/
            /*margin: 0 auto;  !*水平居中*!*/

        }
        .c2 {
            margin-top: 20px;
            height: 100px;
            width: 100px;
            background-color: green;
        }
        .c3 {
            border: 3px solid black;
            height: 400px;
            width: 400px;
            /*padding-top: 20px;*/
            /*padding-left: 40px;*/
            /*padding: 20px;*/
            padding: 20px  40px;
            /*padding: 20px;*/
            /*padding: 20px;*/
            /*padding跟margin简写规律一致*/‘

        }
        p {
            margin: 0;
        }
        ul {
            padding-left: 0;
        }
    </style>

</head>
<body>
<!--<div>啥都卡死的十大科技打卡</div>-->
<!--<div class="c3">-->
<!--   <div class="c1" id="d1"></div>-->
<!--&lt;!&ndash;    <div class="c2" id="d2"></div>&ndash;&gt;-->
<!--</div>-->

<p>sakjdsadslad</p>
<p>sakjdsadslad</p>
<p>sakjdsadslad</p>
<p>sakjdsadslad</p>
<p>sakjdsadslad</p>

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>

</body>
</html>

浮动

浮动的元素是脱离正常文档流的 自身多大就会占多大 不再有独占一行的概念
浮动多用于页面的前期布局(!!!!!!!)

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
        .c1{
            height:100px;
            width: 100px;
            background-color: red;
            float:left;
        }
        .c2{
            height: 100px;
            width: 100px;
            background-color: green;
            float: right;   /*浮动到上方没有标签，或只有浮动标签行*/
        }

    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>

浮动简单应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left-menu{
            background-color: #4e4e4e;
            width: 20%;
            height: 1000px;
            float: left;
        }
        .right-menu{
            background-color: wheat;
            width: 80%;
            height: 2000px;
            float: right;
        }
    </style>
</head>
<body>
<div class="left-menu"></div>
<div class="right-menu"></div>
</body>
</html>

浮动带来的影响

浮动会造成父标签塌陷的问题

clear属性
专门用来清除浮动所带来的负面影响 父标签塌陷的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        #d1{
            border: 3px solid black;
        }
        .c1{
            height: 100px;
            width: 100px;
            background-color: red;
            float: left;
        }
        .c2{
            height: 100px;
            width: 100px;
            background-color: green;
            float: left;
        }
        /*.c3{*/             /*方法一：通过c3来撑起外面的黑框*/
        /*    height: 150px;*/
        /*    width:100px;*/
        /*    background-color: orange;*/
        /*}*/
        .clearfix:after{    /*方法二(推荐)：通过查找没有浮动标签，插入，来撑起外面黑框*/
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
<div id="d1" class="clearfix">
    <div class="c1"></div>
    <div class="c2"></div>
<!--    <div class="c3">我是C3</div>-->
</div>
</body>
</html>

结论:谁塌陷了 就给谁加上clearfix样式类

溢出属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 50px;
            width: 50px;
            border: 1px solid black;
            overflow: auto;
        }
    </style>
</head>
<body>
<div class="c1">
    今天周五了 可惜明天不放假
    今天周五了 可惜明天不放假
    今天周五了 可惜明天不放假
    今天周五了 可惜明天不放假
    今天周五了 可惜明天不放假
    今天周五了 可惜明天不放假
    今天周五了 可惜明天不放假
</div>
</body>
</html>

圆形头像示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            background-color: antiquewhite;
        }
        .c1{
            height: 100px;
            width: 100px;
            border-radius: 50%;
            border:5px solid white;
            overflow: hidden;
        }
        img{
            max-width: 100%; /*显示的最大宽度*/
        }
    </style>
</head>
<body>
<div class="c1">
    <img src="111.png" alt="">
</div>
</body>
</html>

 

定位

所有的标签默认情况下都是静态的(static) 无法做位置的修改
如果你想要修改标签位置 你需要先将静态改为可以修改的状态

相对定位 relative
相当于标签原有的位置做偏移

绝对定位 absolute
相当于已经定位过的(static>>>relative)父标签做偏移
例:小米购物车

相当于浏览器窗口固定在某个位置始终不变
例:回到顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .c1{
            height: 100px;
            width: 100px;
            background-color: red;
             /*position: static;  !*默认值*!*/
            position: relative; /*相对定位*/
            left: 100px;
            top:100px;
        }
        .c2{
            height: 50px;
            width: 100px;
            background: green;
            position: relative;
        }
        .c3{    /*相对于c2左上角进行定位*/
            position: absolute;
            height: 200px;
            width: 200px;
            background-color: orange;
            left: 100px;
            top: 50px;
        }
        .cc{
            height: 50px;
            width: 100px;
            background-color: #4e4e4e;
            color: white;   /*字体颜色*/
            position: fixed;
            bottom: 20px;
            right: 20px;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2">
    <div class="c3">空空的 什么都没有...</div>
</div>
<div style="height: 1000px;background-color: red"></div>
<div style="height: 1000px;background-color: green"></div>
<div style="height: 1000px;background-color: orange"></div>
<div class="cc">回到顶部</div>
</body>
</html>

是否脱离文件流

脱离文档流：

　　绝对定位

　　固定定位

不脱离文档流：

　　相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            background-color: red;
            height: 50px;
            width: 50px;
            /*position: relative;*/
        }
        .c2 {
            background-color: green;
            height: 50px;
            width: 50px;
            /*position: absolute;*/
            position: fixed;
            bottom: 20px;
            right: 20px;
        }
        .c3 {
            background-color: orange;
            height: 50px;
            width: 50px;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>

z-index
控制z轴的距离

设置对象的层叠顺序。

  1. z-index 值表示谁压着谁，数值大的压盖住数值小的，
  2. 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
  3. z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
  4. 从父现象：父亲怂了，儿子再牛逼也没用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .modal{
            background-color: #808080;
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            z-index: 999;
            opacity: 0.4;
        }
        .form{
            background-color: white;
            height: 200px;
            width: 100px;
            position: fixed;
            top: 50%;
            left: 50%;
            z-index: 1000;
            margin-top:-100px;
            margin-left: -50px;
        }
    </style>
</head>
<body>
<div>我是最底下的那个</div>
<div class="modal"></div>
<div class="form"></div>
</body>
</html>

透明度

用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。

optacity既可以该颜色也可以改文本
rgba只能该颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .c1{
            background-color: rgba(128,128,128,0.4);
        }
        .c2{
            background-color: rgb(128,128,128);
            opacity: 0.4;
        }
    </style>
</head>
<body>
<div class="c1">阿萨德撒大家都</div>
<div class="c2">阿萨德撒大家都</div>
</body>
</html>

原文地址：https://www.cnblogs.com/ludingchao/p/12108319.html

时间： 2024-08-05 08:20:07

前端入门之CCS 2 选择器优先级,调节标签样式,字体属性,文本属性,背景, 边框,画圆,display属性,盒子模型,浮动(clear属性),溢出属性,定位,z-index,透明度的相关文章

web前端入门到实战：用css3实现惊艳面试官的背景即背景动画（高级附源码）

我们传统的前端更多的是用javascript实现各种复杂动画,自从有了Css3 transition和animation以来,前端开发在动画这一块有了更高的自由度和格局,对动画的开发也越来越容易.这篇文章就让我们汇总一下使用Css3实现的各种特效. 1.实现内部虚线边框知识点:outline 核心代码 .dash-border{ width: 200px; height: 100px; line-height: 100px; outline: 1px dashed #fff; outline-o

前端重要盒子模型 浮动 定位 块级元素、行元素 7.9

1.块级元素的特点: (1)块级元素里面的内容,或者背景图片,默认显示在块的左上角 (2)块级元素,默认情况下,单独占满一行. 常用的块级元素:div.p.h1-h6.hr.ul li.ol li.table.body... 2.浮动:float 作用:通过漂浮,让块级元素实现并排 float:left 或 right 注意:如果div左边或者右边的块存在浮动,会对此div产生影响,此时需要清除左右方的浮动 清除浮动:clear:left(清除左边div的浮动)或right(清除右边div的浮动

前端之CSS的属性引入方式、选择器、选择器优先级

目录 1011 前端之CSS的属性引入方式.选择器.选择器优先级 一.CSS介绍 二.CSS语法 2.1CSS实例 2.2 CSS注释 三.css属性的引入方式 3.1 行内样式 3.2 内部样式 3.3 外部样式 四.CSS选择器 4.1 元素(标签)选择器 4.2 id选择器 4.3 类选择器 4.4 通用选择器 4.5 后代选择器 4.6 儿子选择器 4.7 毗邻选择器 4.8 兄弟选择器 4.9 属性选择器 4.10 分组和嵌套选择器 4.11 伪类选择器 4.12 伪类元素选择器 五.

web前端入门与java入门

关于web前端入门一.软件结构划分1.C/S结构:Client(客户)-Server(服务器)之间的交互.特点:客户端的软件必须升级才能使用服务器高版本的功能.例如:阿里巴巴等.2.B/S结构:Browser(浏览器)-Server(服务器)之间的交互.特点:浏览器端的软件无需特定的升级就可访问服务器端的网站.例如:网易新闻等.JavaWeb/EE均基于B/S结构.二.网站基本认识基于B/S结构的应用都叫网站.组成:由很多的html标签组成.三.W3C组织规范了html.css.js(javas

web前端入门到实战：css选择器和css文本样式相关

[文章来源微信公众号:每天学编程]---关注,后台领取编程资源 css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url("*.css");使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 :link-> :visited ->:hover-> :active 或者 : visited -> : link ->:hover-> :active 选择器的优先级: id选择器>

前端-CSS-初探-注释-语法结构-引入方式-选择器-选择器优先级-01(待完善)

目录 CSS(Cascading Style Sheet) CSS注释 CSS语法结构 CSS的三种引入方式 选择器 伪类.伪元素选择器速查 CSS选择器优先级***** 选择器相同的情况下 选择器不同的情况下 选择器权重 样式调整技巧 本篇博客绝大多数内容来源网上,感谢作者的无私分享~ CSS(Cascading Style Sheet) 用来调节标签样式的,又称层叠样式表 CSS注释 /* 单行注释 */ /* 多行注释 */ 经典写法 /* 这是购物车页面的样式表(一般放css文件的第一行

Web前端入门学习（3）——CSS选择器

CSS选择器 id选择器 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #box{width:200px;height:200px;border:2px solid #f3f3f

导航栏布局时遇到的问题以及解决办法 css选择器优先级

得到的导航栏效果 添加#menu ul li{width:30px;} 效果如图 将会使列表项和分隔区域的宽度同时改变因为id选择器的优先级高于类选择器,此时应该为列表项添加内联样式如图 才能得到如下效果 或者可以使用第二种方法 #menu ul li{ float:left; margin-left:10px;text-align:center;padding-left:10px;实现列表项文字的居中 line-height:28px; height:28px; width:40px; bor

CSS选择器优先级（转）

原文:http://www.cnblogs.com/wangfupeng1988/p/4285251.html 另外,w3c有文章介绍了CSS选择器的特定性,见https://www.w3.org/TR/css3-selectors/#specificity 1. 引言 上一节<css知多少(5)——选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的,而且两个设置的颜色不一样,这里的<span