CSS3基础知识探索

最新推荐文章于 2024-08-25 01:17:37 发布

秃狼

最新推荐文章于 2024-08-25 01:17:37 发布

阅读量207

点赞数 1

分类专栏：前端文章标签： css3 css html

本文链接：https://blog.csdn.net/Ostkakah/article/details/120823226

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Cascading Style Sheet 层叠级样式表

CSS的写入

内嵌CSS : 在<head>中的<style>中写入css内容。（<style>中写的是CSS代码）

外链式: 在<link>设置对应的参数。(HTML)

<link href="XXXX.css" rel="stylesheet">

行内样式: 在标签元素中，编写一个style属性，编写样式即可。

导入式: 通过在<head>中添加import。(CSS 2.1)

<style>
    @import url("XXX.css");
</style>

CSS使用的优先级原则:就近原则。

选择器

选择器分为:标签选择器,类选择器，id选择器。

类选择器的特点:可以多处使用且可以跨标签，同一个class，可以复用。

id选择器的特点: id必须保证全局唯一。

选择器之间的优先级为: id选择器 > class选择器 > 标签选择器(越精准级别越高,不符合就近原则)

层次选择器

1.后代选择器:在某个元素的后面。

 body p{
            /*参数设置*/
        }

2.子选择器: 后一代。(只有后一代起效)

 body>p{
            /*参数设置*/
        }

3.相邻兄弟选择器：向下一个兄弟级(同级且在该类的下面的一个选择器)。

.class + p{
            /*参数设置*/
            /*class同级选择器中的下面一个选择器的p标签受影响*/
        }

4.通用选择器: 向下兄弟级(同级且在该类的下面的兄弟选择器)。

.class~p{
            /*参数设置*/
            /*class同级选择器中的p标签受影响*/
        }

结构伪类选择器(伪类用于过滤一些条件，带":"基本都是为类)

例子为

 ul li:first-child{
            /*ul的第一个子元素*/
        }
ul li:last-child{
            /*ul的最后一个子元素*/
        }

对应定位方法为下:

 p:nth-child(1){
 /*按顺序*/
            /*(表示选中p1:定位到父元素,选择当前的第一个元素)选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效*/
            /*以此类推number就表示对应的子元素序号*/
        }

p:nth-of-type(1){
/*按类型*/
            /*选择父元素中序号为number的类型为p的子元素*/
        }

<a>标签的特殊效果

（重点）a:hover ：表示鼠标移到时产生的效果。

a:active : 表示鼠标点击没放的时候的效果。

a:visited :表示点击完后的效果。

a:link:表示未访问时的效果。

属性选择器(本质是正则表达式)

a[id]{
            /*a标签中带有id的属性的元素会受影响，[]中的内容为判断y'jv*/
                 /*  = 绝对等于*/
                /*  *= 包含*/
                /*  ^= 以什么开头*/
                /* $= 以什么结尾*/

        }


a[href^=http]{
            /*选中href中以http开头的元素*/
            /*^http为正则表达式*/
        }

字体的设置

 p{
            /*oblique表示字体的样式,bolder 表示字体的粗细,12px表示字体的大小,"楷体"表示用什么字体*/
            font: oblique bolder 12px "楷体";
        }
/* font中的设置的属性为: 字体样式 字体的粗细 字体的大小 字体的种类*/

文本样式

颜色的使用:

RGB : 0~F

RGBA : A表示透明度。使用方法为color : rgb(number, number, number, 0~1)，透明度的范围为0 ~ 1。

text-decoraction : 文字效果。(在a标签中可以通过text-decoraction : none 去除下划线)

text-align : 排版。

text-indent : 段落首行缩进。

line-height :行高。

text-decoration : 设置样式。（underline:下划线，line-through:中划线，overline:上划线）

vertical-align : 对齐方式。(middle:中间对齐)其使用时需要两个对象作为参考。

text-shadow : 阴影。

#price{
    text-shadow: 水平偏移(必填,允许负值) 垂直偏移(必填,允许负值) 模糊距离(可选)  阴影颜色(可选)
}

list-style : 列表效果。（none : 去掉圆点, circle : 空心圆点，decimal : 数字，square : 正方形点）

样式属性

border : 边框。（边框的样式有 : solid, double, dashed(虚线)）

div{
    border : 边框粗细 边框的样式 边框的颜色
}

background : 背景效果。

div{
    background:颜色 url("")(可选) x轴 y轴 平铺效果(可选)
}

background-image:用对应的图片覆盖背景。(默认是全部平铺的,也可以通过background : url("")直接使用)

div{
    background-image: url("对应的文件路径")    
}

background-repeat :平铺的方向(一般配合background-image使用)

div{
    background-repeat: repeat-x(水平平铺)/repeat-y(垂直平铺)/no-repeat(不平铺)
}

渐变

background-color: #0093E9;
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);

盒子模型

margin : 外边框。

padding : 内边框。

border : 边框。

body 总有一个外边距值，为了美观，我们可以就其margin设为 : 0。

margin和padding 都可以设置上下左右的边框效果。(其对应的顺序为：上右下左(顺时针旋转)。如果只有两个参数就代表: 上下,左右)

margin的妙用: 居中。(居中的条件:外部为块元素，且块元素有固定的宽度)

div{
    margin:0 auto;
    /*上下的外边距为0，左右自动对齐(auto)，最终实现居中*/
}

圆角边框

border-radius : 圆角边框。(参数符合顺时针规律)

div{
    border-radius: 50px(左上和右下) 20px(左下和右上)。
}
div{
    border-radius: 50px(左上) 50px(右上) 50px(右下) 50px(左下)。
}

盒子阴影

box-shadow : 阴影。

#price{
    box-shadow: 水平偏移(必填,允许负值) 垂直偏移(必填,允许负值) 模糊距离(可选)  阴影颜色(可选)
}

float & display & overfloat

display : 存在的属性为:inline ， block， inline-blocked。

overfloat其对应的参数为: scroll(放不下的内容可以通过滚动条查询)，hidden(将放不下的内容隐藏起来)，auto(自动)

float和display:line-blocked的区别

不同之处：对元素设置display：inline-block ，元素不会脱离文本流，而float就会使得元素脱离文本流，且还有父元素高度坍塌的效果。

相同之处：能在某程度上达到一样的效果。

父级边框塌陷问题的解决方案

1.通过一个空的div标签，清除浮动。(程序里最好不要出现空的div，所以不推荐使用)

2. 增加父级元素的高度。(不建议使用)

3.在父级元素中添加overflow:hidden属性。(会隐藏掉内容，不建议使用)

4.在父类添加一个伪类。(和方法一一样，只是以编程的方式实现，推荐使用)

#father:after{
    content:'';
    dispaly:block;
    clear:both;
}

定位（position）

相对定位:相对自己原来的位置进行偏移,相对定位的话，它仍然在标准文档流中，原来的位置会被保留。(position:relative, 然后设置方向,top表示:距离上边的距离，left表示:距离左边的距离，right表示:距离右边的距离，bottom表示:距离下边的距离)

绝对定位(position:absolute):

1.没有父级元素定位得前提下，相对于浏览器定位。(在父级元素没有设置position时)

2.假设父级元素存在定位，我们通常会相对于父级元素进行偏移。(只能在父级元素的范围内进行移动)

3.偏移方向:类似相对位置的偏移方向。

4.相对于父级或浏览器的位置进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留。

固定定位(position:fixed)：位置始终固定，不会因为滚动条的移动或窗口的大小调整而改变位置。

z-index

z-index:表示层级。(z-index:number,number表示处于的层数,最低是0，最高无限制)

opacity

opacity：表示背景的透明度。(opacity: 0~1，0~1表示百分比，可以配合z-index使用)。

设置透明度的其他方法:

.div{
    filter:Alpha(opacity=50)
/*opacity中的参数范围为0~100*/
}

此方法用于处理:IE版本兼容问题。

秃狼

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS3基础知识探索

Cascading Style Sheet 层叠级样式表CSS的写入内嵌CSS : 在<head>中的<style>中写入css内容。外链式: 在<link>设置对应的参数。<link href="XXXX.css" rel="stylesheet">
复制链接

扫一扫

专栏目录