【基础】CSS基础选择器和属性

2022-10-02 08:56:28

目录

选择器

#id ID选择器

理论上,同一个id名可以重复出现,但是由于JavaScript,可以根据id只能获取一个元素,同一个id名在同一个html文档中只能出现一次;一个html元素只能拥有一个id名

.class 类选择器

class选择器,类选择器,可以选中class名相同的一组元素或一个元素,一个元素可以有多个类名(class),同一个元素可以t同时拥有id和class

#id,.class 群组选择器

用逗号隔开,同时选中多钟不同的标签

#id .class 后代选择器

后代选择能指定的对象，只要是元素下面的元素，无论几级，都能选定

#id>.class 子选择器

子选择器只能选择自己的子类，第二级元素，而不能选择第二级别以下的元素

#id+.class 毗邻选择器

毗邻选择器,选择基准元素后边紧跟的兄弟元素,兄弟元素指的是两个或多个拥有同样的父元素

.class[type = "text"] 属性选择器

通过属性值获取 HTML 对象

新增选择器

  1. :first-of-type,:last-of-type,:only-of-type,:only-child
  2. :first-child,:last-child,
  3. :nth-child(odd)奇数行 :nth-child(even)偶数行 :nth-child(2);

权重值

!important的属性权重>行内样式权重>id选择器权重>class选择器(类选择器)权重>标签名选择器权重>通配符选择器权重>浏览器的默认样式

:link 选中有href存在的标签的样式

:hover 鼠标悬停时添加样式

:visited 访问过后的样式

:active 鼠标点中时的样式

:focus 选中焦点元素时的样式

:before ::before 一个冒号是CSS2,2个冒号是CSS3,没太大区别,兼容性一个冒号好,HTML5建议使用CSS3

:after 在元素内容前后加上指定内容

清浮动

.clearfix::afrer{
    content:"";
    display:block;
    width:0;
    height:0;
    clear: both;
    visibility: hidden;
}

常用给布局

水平居中

行内或类行内元素:
text-align:center;
块级元素:
margin: 0 auto;
注意:float不适合实现水平居中;
任何元素:
position:absolute +left:50%;
transform:translateX(-50%);
或者
display:flex;
justify-content: center

垂直居中

行内或类行内元素:
设置line-height 等于height
块级元素:
position：absolute +top:50%;
transform:translateY(-50%)
或
display:flex;
align-items: center

文本超出隐藏

overflow:hidden;
text-overflow:ellipsis; *****  
/*ellipsis;文本溢出时显示省略号*/
/*clip;文本强行切除.*/
white-space: nowrap;/*文本强制不换行*/

盒模型

标准盒模型

在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

怪异盒模型

一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

弹性盒模型

.box{
    display:flex;
    display:-webkit-flex;
    flex-direction: row;
     /*设置元素在主轴排列方向flex-direction默认值为row横向→,row-reverse横向←,column竖向↓,column-reverse竖向↑*/
    flex-wrap:column;
    /*flex-wrap 设置子元素的换行及方向;默认nowrap/warp换行/wrap-reverse反向换行*/
    justify-content: center;
    /*justify-content.设置元素在主轴上的对齐方式,默认flex-start左对齐/flex-end右对齐/center居中/space-between两端对齐子元素间隔相同两边靠边/space-around子元素两侧相等,间距为双倍,两边不靠边*/
    align-items: center;
    /*设置子元素在交叉轴(竖轴,Y轴)的对齐方式,默认shretch拉伸/center居中/flex-start顶部对齐/flex-end底部对齐/baseline文本线对齐*/
    flex-grow:0;
    /*设置元素的放大比例,默认为0*/
    flex-shrink:1;/*lex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。*/
    flex-basis:50px;
    /*设置分配多余空间之前,元素占据主轴空间*/
    order: 2;
    /*设置排列次序,值越大越靠后*/
}

.box{
    flex: 0 1 auto; /*==flex-grow: 0;flex-shrink: 1;flex-basis: auto;*/
}

position和display

position的值:staticrelative | absolute | fixed | sticky | inherit | initial | unset;

? sticky (粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位)

  • 粘性定位的固定定位并不一定是position:fixed，只有目标元素的任意父元素都没有设置position:relative | absolute | fixed | sticky的情况下，才与position: fixed表现一样。而当其任一父元素设置了position:relative | absolute | fixed | sticky时，目标元素是相对于父元素的固定。

sticky 的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=p, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            height: 3000px;
            background: #cccccc;
        }
        #nav{
            position: sticky;
            top: 0;
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: space-around;
            background: cyan;
            margin: 100px 0;
        }
    </style>
</head>
<body>
    <div id="nav">
        <div>导航1</div>
        <div>导航2</div>
        <div>导航3</div>
        <div>导航4</div>
        <div>导航5</div>
        <div>导航6</div>
    </div>
</body>
</html>

display的值:

none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示（类似 ），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 ），表格前后没有换行符。 ）。 ）。 ）。 ）。 ）。）
table-row-group 此元素会作为一个或多个行的分组来显示（类似
table-header-group 此元素会作为一个或多个行的分组来显示（类似
table-footer-group 此元素会作为一个或多个行的分组来显示（类似
table-row 此元素会作为一个表格行显示（类似
table-column-group 此元素会作为一个或多个列的分组来显示（类似
table-column 此元素会作为一个单元格列显示（类似
table-cell 此元素会作为一个表格单元格显示（类似 和 ）
table-caption 此元素会作为一个表格标题显示（类似
）
inherit 规定应该从父元素继承 display 属性的值。

2D,3D转

#box{
	width:100px;
	height:100px;
	background:#cccccc;
	transform:rotate(45deg);
	/*旋转 rotate3d(x,y,z,angle) rotateX(45deg) rotateY(45deg) rotateZ(45deg)*/
	transform: scale(0.5);
	/*缩放 scale(w,h) scale3d(x,y,z)  scale(n) scaleX(w) scaleY(h)*/
	transform: translate(10px,10px);
	/*位移 水平，垂直方向的位移量translate(x,y) translate3d(x,y,z) translateX(length) translateY(length) translateZ(z)*/
	transform: skew(45deg);
	/*倾斜  skew(45deg,45deg) skewX(45deg) skewY(45deg) scaleZ(45deg) */
	transform-origin:50% 50%;
	/*设置转换基点transform-origin:x y; 
		1.(left,right,center,top,bottom)
		2.50% 50%;
		3.length length;
		(注：也要加相应内核前缀)
	*/
}

动画

#box{
    animation-name: myAnimation;
    animation-duration: 3s;
    /*完成一个周期的时间*/
    animation-timing-function: easy-out;
    /*速度曲线*/
    animation-delay: 0.5s;
    /*延迟播放*/
    animation-iteration-count: infinite;
    /*动画播放次数， n/infinite 无线循环*/
    animation-direction: normal;
    /*动画是否逆向播放 normal/alternation */
    animation-paly-state: running;
    /*动画播放状态 paused/running*/
    animation-fill-mode: none;
    /*动画时间之外的状态 none/forward/backward/both(forward+backward)*/
}
@keyframes myAnimate{
    0%{}
    50%{}
    100%{}
}

------------恢复内容开始------------

目录

选择器

#id ID选择器

理论上,同一个id名可以重复出现,但是由于JavaScript,可以根据id只能获取一个元素,同一个id名在同一个html文档中只能出现一次;一个html元素只能拥有一个id名

.class 类选择器

class选择器,类选择器,可以选中class名相同的一组元素或一个元素,一个元素可以有多个类名(class),同一个元素可以t同时拥有id和class

#id,.class 群组选择器

用逗号隔开,同时选中多钟不同的标签

#id .class 后代选择器

后代选择能指定的对象，只要是元素下面的元素，无论几级，都能选定

#id>.class 子选择器

子选择器只能选择自己的子类，第二级元素，而不能选择第二级别以下的元素

#id+.class 毗邻选择器

毗邻选择器,选择基准元素后边紧跟的兄弟元素,兄弟元素指的是两个或多个拥有同样的父元素

.class[type = "text"] 属性选择器

通过属性值获取 HTML 对象

新增选择器

  1. :first-of-type,:last-of-type,:only-of-type,:only-child
  2. :first-child,:last-child,
  3. :nth-child(odd)奇数行 :nth-child(even)偶数行 :nth-child(2);

权重值

!important的属性权重>行内样式权重>id选择器权重>class选择器(类选择器)权重>标签名选择器权重>通配符选择器权重>浏览器的默认样式

:link 选中有href存在的标签的样式

:hover 鼠标悬停时添加样式

:visited 访问过后的样式

:active 鼠标点中时的样式

:focus 选中焦点元素时的样式

:before ::before 一个冒号是CSS2,2个冒号是CSS3,没太大区别,兼容性一个冒号好,HTML5建议使用CSS3

:after 在元素内容前后加上指定内容

清浮动

.clearfix::afrer{
    content:"";
    display:block;
    width:0;
    height:0;
    clear: both;
    visibility: hidden;
}

常用给布局

水平居中

行内或类行内元素:
text-align:center;
块级元素:
margin: 0 auto;
注意:float不适合实现水平居中;
任何元素:
position:absolute +left:50%;
transform:translateX(-50%);
或者
display:flex;
justify-content: center

垂直居中

行内或类行内元素:
设置line-height 等于height
块级元素:
position：absolute +top:50%;
transform:translateY(-50%)
或
display:flex;
align-items: center

文本超出隐藏

overflow:hidden;
text-overflow:ellipsis; *****  
/*ellipsis;文本溢出时显示省略号*/
/*clip;文本强行切除.*/
white-space: nowrap;/*文本强制不换行*/

盒模型

标准盒模型

在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

怪异盒模型

一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

弹性盒模型

.box{
    display:flex;
    display:-webkit-flex;
    flex-direction: row;
     /*设置元素在主轴排列方向flex-direction默认值为row横向→,row-reverse横向←,column竖向↓,column-reverse竖向↑*/
    flex-wrap:column;
    /*flex-wrap 设置子元素的换行及方向;默认nowrap/warp换行/wrap-reverse反向换行*/
    justify-content: center;
    /*justify-content.设置元素在主轴上的对齐方式,默认flex-start左对齐/flex-end右对齐/center居中/space-between两端对齐子元素间隔相同两边靠边/space-around子元素两侧相等,间距为双倍,两边不靠边*/
    align-items: center;
    /*设置子元素在交叉轴(竖轴,Y轴)的对齐方式,默认shretch拉伸/center居中/flex-start顶部对齐/flex-end底部对齐/baseline文本线对齐*/
    flex-grow:0;
    /*设置元素的放大比例,默认为0*/
    flex-shrink:1;/*lex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。*/
    flex-basis:50px;
    /*设置分配多余空间之前,元素占据主轴空间*/
    order: 2;
    /*设置排列次序,值越大越靠后*/
}

.box{
    flex: 0 1 auto; /*==flex-grow: 0;flex-shrink: 1;flex-basis: auto;*/
}

position和display

position的值:staticrelative | absolute | fixed | sticky | inherit | initial | unset;

? sticky (粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位)

  • 粘性定位的固定定位并不一定是position:fixed，只有目标元素的任意父元素都没有设置position:relative | absolute | fixed | sticky的情况下，才与position: fixed表现一样。而当其任一父元素设置了position:relative | absolute | fixed | sticky时，目标元素是相对于父元素的固定。

sticky 的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=p, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            height: 3000px;
            background: #cccccc;
        }
        #nav{
            position: sticky;
            top: 0;
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: space-around;
            background: cyan;
            margin: 100px 0;
        }
    </style>
</head>
<body>
    <div id="nav">
        <div>导航1</div>
        <div>导航2</div>
        <div>导航3</div>
        <div>导航4</div>
        <div>导航5</div>
        <div>导航6</div>
    </div>
</body>
</html>

display的值:

none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示（类似 ），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 ），表格前后没有换行符。 ）。 ）。 ）。 ）。 ）。）
table-row-group 此元素会作为一个或多个行的分组来显示（类似
table-header-group 此元素会作为一个或多个行的分组来显示（类似
table-footer-group 此元素会作为一个或多个行的分组来显示（类似
table-row 此元素会作为一个表格行显示（类似
table-column-group 此元素会作为一个或多个列的分组来显示（类似
table-column 此元素会作为一个单元格列显示（类似
table-cell 此元素会作为一个表格单元格显示（类似 和 ）
table-caption 此元素会作为一个表格标题显示（类似
）
inherit 规定应该从父元素继承 display 属性的值。

2D,3D转

#box{
	width:100px;
	height:100px;
	background:#cccccc;
	transform:rotate(45deg);
	/*旋转 rotate3d(x,y,z,angle) rotateX(45deg) rotateY(45deg) rotateZ(45deg)*/
	transform: scale(0.5);
	/*缩放 scale(w,h) scale3d(x,y,z)  scale(n) scaleX(w) scaleY(h)*/
	transform: translate(10px,10px);
	/*位移 水平，垂直方向的位移量translate(x,y) translate3d(x,y,z) translateX(length) translateY(length) translateZ(z)*/
	transform: skew(45deg);
	/*倾斜  skew(45deg,45deg) skewX(45deg) skewY(45deg) scaleZ(45deg) */
	transform-origin:50% 50%;
	/*设置转换基点transform-origin:x y; 
		1.(left,right,center,top,bottom)
		2.50% 50%;
		3.length length;
		(注：也要加相应内核前缀)
	*/
}

动画

#box{
    animation-name: myAnimation;
    animation-duration: 3s;
    /*完成一个周期的时间*/
    animation-timing-function: easy-out;
    /*速度曲线*/
    animation-delay: 0.5s;
    /*延迟播放*/
    animation-iteration-count: infinite;
    /*动画播放次数， n/infinite 无线循环*/
    animation-direction: normal;
    /*动画是否逆向播放 normal/alternation */
    animation-paly-state: running;
    /*动画播放状态 paused/running*/
    animation-fill-mode: none;
    /*动画时间之外的状态 none/forward/backward/both(forward+backward)*/
}
@keyframes myAnimate{
    0%{}
    50%{}
    100%{}
}

------------恢复内容结束------------

【基础】CSS基础选择器和属性

踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！
      
上一篇：重构eclipse的新建Java类向页


下一篇：C++ 内连接与外连接 (转)