首页 > 其他分享 >CSS3

CSS3

时间:2023-08-17 21:11:39浏览次数:58  
标签:CSS3 color 标签 id -- background 选择器

CSS3

1. CSS导入方式

优先级:就近原则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css导入方式</title>
    <!-- 2.内部样式 -->
    <style>
        h2{
            color: aqua;
        }
    </style>

    <!-- 3.外部样式-->
    <link rel="stylesheet" href="css/style01.css">
</head>
<body>
<!--1.行内样式:在标签原始中,编写一个style属性-->
<h1 style="color: pink">我是标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
</body>
</html>

2. 选择器

2.1 基本选择器

优先级:id > class > 标签

2.1.1 标签选择器

会选择body下所有h1标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style>
        h1{
            color: orange;
        }
    </style>
</head>
<body>
<h1>标签选择器</h1>
<h1>标签选择器</h1>
<h1>标签选择器</h1>
<h2>标签选择器</h2>
<h2>标签选择器</h2>
<h2>标签选择器</h2>
</body>
</html>

2.1.2 类选择器

会选择所有带有demo01类选择器的标签

可以复用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        .demo01{
            color: pink;
        }
        .demo02{
            color: blue;
        }
    </style>
</head>
<body>
<!--类选择器-->
<h1 class="demo01">类选择器</h1>
<h1 class="demo01">类选择器</h1>
<h1 class="demo02">类选择器</h1>
<h1 class="demo02">类选择器</h1>

</body>
</html>

2.2.3 id选择器

不可以复用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style>
        #demo01{
            color: aqua;
        }
        #demo02{
            color: orange;
        }
        .demo02{
            color: pink;
        }
        #demo03{
            color: blue;
        }
        h1{
            color: blueviolet;
        }
    </style>
</head>
<body>
<!--类选择器必须保证全局唯一-->
<h1 id="demo01">id选择器1</h1>
<h1 id="demo02" class="demo02">id选择器2</h1>
<h1 class="demo02" id="demo03">id选择器3</h1>
<h1 class="demo02">id选择器4</h1>
<h1>id选择器5</h1>
</body>
</html>

2.2 层次选择器

2.2.1 后代自选择器:在某个元素后面

body 里面所有的p标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style>
        body p{
            color: blue;
        }
    </style>
</head>
<body>
<p>我是后代选择器</p>
<div>
    <p>我是后代选择器</p>
</div>
</body>
</html>

2.2.2 子选择器

第一代的p标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子选择器</title>
    <style>
        body>p{
            color: blue;
        }
    </style>
</head>
<body>
<p>我是子选择器</p>
<div>
    <p>我是子选择器</p>
</div>
</body>
</html>

2.2.3 相邻兄弟选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相邻兄弟选择器</title>
    <style>
        .active + p{
            color: blue;
        }
    </style>
</head>
<body>
<!-- 向下相邻,只有一个-->
<p class="active">相邻兄弟选择器</p>
<p>相邻兄弟选择器</p>
</body>
</html>

2.2.4 通用选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通用选择器</title>
    <style>
        .active~p{
            color: blue;
        }
    </style>
</head>
<body>
<!-- 向下所有兄弟元素-->
<p class="active">通用选择器</p>
<p>通用选择器</p>
<p>通用选择器</p>
<p>通用选择器</p>
</body>
</html>

2.3结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <style>
        /*ul里的第一个选择器*/
        ul li:first-child{
            background-color: orange;
        }

        /*ul里的最后一个选择器*/
        ul li:last-child{
            background-color: pink;
        }
        /* 选择父元素里第一个元素(是p标签才生效)*/
        p:nth-child(2){
            background-color: blue;
        }
        /*选择父元素里第一个p标签*/
        p:nth-of-type(1){
            background-color: blueviolet;
        }

    </style>
</head>
<body>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>

</body>
</html>

2.4 属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        .demo01 a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background-color: #2700ff;
            text-align: center;
            color: gainsboro;
            line-height: 50px;
            text-decoration: none;
            margin-right: 5px;
        }
        /*选中带有id标签的a元素*/
        /*a[id]{

        }*/
        a[id=first]{
            background-color: blueviolet;
        }
        /*
        =:绝对对于
        *=:包含
        ^=:以...开头
        $=:以...结尾
        */
        /*a[class*=links]{
            background-color: yellow;
        }*/
        a[href^="http"]{
            background-color: brown;
        }
    </style>
</head>
<body>
    <p class="demo01">
        <a href="https://www.baidu.com" class="links item first" id="first">1</a>
        <a href="" class="links item active" target="_blank" title="test">2</a>
        <a href="../../resources/bd.jpg" class="links item">3</a>
        <a href="../../html5/index.html" class="links item">4</a>
    </p>
</body>
</html>

3. 字体样式

font-family:字体
font-size:字体大小
font-weight:粗细
color:字体颜色

4. 文本样式

color rgb rgba:颜色
text-align:center:居中对齐
text-indent:2em 缩进
line-height:行高(行高 = 块高:垂直居中)
vertical-align:middle 文本图片水平对齐

5. 文本阴影和超链接伪类

a:hover{}-->鼠标悬停
a:active{}-->鼠标按住未释放
a:link{}-->未访问
a:visited{}-->访问之后颜色
text-shadow{}-->阴影颜色 水平偏移 垂直偏移 阴影半径

6. 列表样式

list-style:none-->去掉圆点  circle-->空心圆  decimal-->数字  square-->正方形

7. 背景

background-color:pink;-->图片未显示时显示颜色
background-image:url("path");默认平铺 
							no-repeat-->不重复 repeat-x-->水平平铺 repeat-y-->垂直平铺

8. 渐变

background-color: #FFDEE9;
background-image: linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%);

9. 盒子模型

margin:外边距
padding:内边距
border:边框
宽度 = 圆角边框半径:圆

9. 浮动

块级元素:h1-h6 div p ul...
行内元素:span a img strong...

10. 父级边框塌陷问题

  1. 增加父级元素的高度
#father{
	height:800px;
}
  1. 增加一个空的div标签,清楚浮动
<div class="clear"></div>

.clear{
	clear:both;
}
  1. overflow
父级元素加:
overflow:hidden;
  1. 父元素添加一个伪类(推荐)
#father:after{
	cotent:‘’;
	display:block;
	clear:both;
}

11. 相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        div{
            width: 200px;
            height: 180px;
            font-size: 12px;
            line-height: 40px;
        }
        .one{
            background-color: #2700ff;
        }
        .two{
            background-color: #2ed422;
        }
        /*相对于自己原来的位置偏移,原来位置保留*/
        .three{
            position: relative;
            top: 30px;
            background-color: #5716c1;
        }

    </style>
</head>
<body>

<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</body>
</html>

12. 绝对定位

  1. 没有父级元素时,以浏览器为标准
  2. 原来位置不保留
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        div{
            width: 200px;
            height: 180px;
            font-size: 12px;
            line-height: 40px;
        }
        .one{
            position: absolute;
            top: 100px;
            background-color: #2700ff;
        }
        .two{
            position: absolute;
            top: 300px;
            background-color: #2ed422;
        }

        .three{
            background-color: #5716c1;
        }

    </style>
</head>
<body>

<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</body>
</html>

13. z-index

z-index:决定一个元素在文档中的层叠顺序

标签:CSS3,color,标签,id,--,background,选择器
From: https://www.cnblogs.com/yqquinn/p/17638860.html

相关文章

  • h5(html5)+css3前端笔记四
    Emmet语法1.生成标签直接输入标签名按tab键即可比如div然后tab键,就可以生成<div></div>2.如果想要生成多个相同标签加上*就可以了比如div*3就可以快速生成3个div3.如果有父子级关系的标签,可以用>比如ul>li就可以了4.如果有兄弟关系的标签,用+就可以了比如div+p5.如......
  • CSS3---------------渐变
    一、渐变--(gradient)#、CSS3渐变(gradients)可以让你在两个或多个指定颜色之间显示平稳的过度,包括透明度。CSS3定义了两种类型的渐变(gradients):1.线性渐变(LinearGradients)-向下、向上、向左、向右、对角方向:(tobottom、totop、toright、toleft、tobo......
  • css3瀑布流布局遇见截断下一列展示后半截现象
    css3瀑布流布局遇见截断下一列展示后半截现象注:css3实现瀑布流布局简直不要太香~~~~~场景-在uniapp项目中当瀑布流布局column-grap:10px相邻两列之间的间隙为10px,column-count:2,2列展示时,就出现了截断问题,如下图:代码如下:<viewclss="feeds-comtainer"><viewclass="fee......
  • HTML5CSS3提高
    1HTML5新特性1.1概述HTML5的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题,基本是IE9+以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性。1.2语义化标签(★★)以前布局,我们基本用div来做......
  • HTML5CSS3基础
    目录HTML5CSS3基础12D转换1.1二维坐标系1.22D转换之移动translate1.32D转换之旋转rotate1.42D转换中心点transform-origin1.52D转换之缩放scale1.62D转换综合写法1.72D转换总结2动画2.1动画的基本使用2.2动画常用属性2.3动画简写属性2.4速度曲线细节33D......
  • CSS3
    1、什么是CSS如何学习CSS是什么CSS怎么用CSS选择器(重点+难点)美化网页(文字,阴影,超链接,列表,渐变.....)盒子模型浮动定位网页动画(特效)1.1、什么是CSSCascadingStyleSheet层叠级联样式表CSS:表现(美化网页)字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动.........
  • HTML5/CSS3学习——Canvas使用
    什么是Canvas?HTML5的Canvas 元素使用JavaScript在网页上绘制图像。画布是一个矩形区域,你可以控制其每一像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 创建Canvas元素向HTML5页面添加Canvas 元素。规定元素的id、宽度和高度:<canvas......
  • HTML5与CSS3之3D转换
    一:3D转换简介我们生活的环境是3D的,照片是3D物体在2D平面上呈现的例子。特点:近大远小物体后面遮挡看不见当我们在网页上构建3D效果时候参考这些特点就能产生3D效果二:三维坐标系三维坐标系其实就是指立体几何空间,立体空间是由3个轴共同组成的。x轴:水平向向右注意:x右边是正值,左......
  • css3新特性笔记之“选择器” .
    http://www.blueidea.com/tech/web/2009/6930_2.asp选择器属性选择器   匹配包含以特定的值开头的属性的元素     匹配包含以特定的值结尾的属性的元素     匹配包含含有特定的值的属性的元素  (1)[att^="value"]匹配包含以特定的值开头的属性的元素(2)[att$......
  • css3之:target伪类
    CSS3target伪类    -------用来匹配URI某一个标志符的目标元素。一般url中包含"#"字符,后面带有一个标志符号,如:"#top" 1、浏览器支持情况:      除了IE6-8,其他浏览器都支持。     http://caniuse.com/#search=%3Atarget  2、使用方式:   //类似于hov......