CSS属性

2024-03-02 08:42:10

优先级

!important>行内样式>ID选择器>类、伪类、属性>元素、伪元素>继承>通配符

选择器

标签选择器

p{
    color:red;
}

ID选择器

#warning{
    color:red;
}

属性选择器

<ul>
    <li foo>1</li>
    <li foo="abc">2</li>
    <li foo="abc efj">3</li>
    <li foo="abcefj">4</li>
    <li foo="efjabc">5</li>
    <li foo="ab">6</li>
</ul>

//选择 attribute=value 的所有元素。
[foo=abc]{
    background-color:red;
}

//选择 attribute 属性包含单词 value 的所有元素。
[foo~=abc]{
    background-color:red;
}

//选择其 attribute 属性值以 value 开头的所有元素。类似正则的 ^,以什么开始
[foo^=abc]{
    background-color:red;
}

//选择其 attribute 属性值以 value 结束的所有元素。类似正则的 $,以什么结束
[foo$=abc]{
    background-color:red;
}

//选择其 attribute 属性中包含 value 子串的每个元素。
[foo*=abc]{
    background-color:red;
}

//选择 attribute 属性值以 value 开头的所有元素。
[foo|=abc]{
    background-color:red;
}

后代选择器 element element

ul li{
    border: 1px solid red;
}

子选择器 element>element

 ul>li>p{
   border: 1px solid red;
}

相邻兄弟选择器 element+element

<div>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</div>

//选择紧接在 element元素之后的 element 元素。
h1+p{
    color:red;
}

一般兄弟选择器 element1~element2

//选择前面有 element1 元素的每个 elem 元素。
<div>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</div>

 h1~p{
   border: 1px solid red;
}

伪类选择器

//:root 文档根元素伪类

:root{
    background-color:red;
}

//:nth-child(n) 孩子选择器
<div>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</div>

div :nth-child(1){
    color:red;
}

//:nth-of-type(n) 同类型的第n个元素
div p:nth-of-type(2){
    color: red;
}

//选择属于父元素element的第一个子元素。 等同 :nth-child(1)
element:first-child

//选择属于父元素element的最后一个子元素。
element:last-child

//同类型的第一个子元素
element:first-of-type

//同类型的最后一个子元素
element:last-of-type

<div>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</div>
<div>
    <h1>h2</h1>  
</div>

 div :only-child{
    color: red;
 }

//没有访问过的状态
a:link

//链接正在被点击
a:active

//选择鼠标指针位于其上的链接。
a:hover

//选择所有已被访问的链接。
a:visited

//:focus 选择器用于选取获得焦点的元素。
:focus

//选择每个启用的 input 元素 / 选择每个禁用的 input 元素
:enabled / :disabled

//选择每个被选中的 input 元素。自定义开关可以用这个实现
:checked

//选择非 selector 元素的每个元素。（反向选择）
:not(selector)

伪元素选择器

element::first-line

//p 元素的第一行发生改变
p:first-line{
	background-color:yellow;
}


element::first-letter
//直接第一个字符变黄，如果JavaScript做的话，需要获取字符串，再获取第一个字符，再改变其颜色
h1:first-letter{
	color:yellow;
}

//在每个 element 元素的内容之前插入内容。我们更多的可能是当作一个div来用
element::before

//在每个element元素的内容之后插入内容。我们可能更多的是用来清除浮动或验证表单提示等其它
element::after

//选择被用户选取的元素部分。
::selection

动画简写属性

animation 动画名称持续时间运动曲线何时开始播放次数是否反方向动画开始或结束状态

animation: name duration timing-function delay iteration-count direction fill-mode;

background

    /* 背景图片 */
background: no-repeat center/100% url("../img/index.png");
	/* 背景颜色 */
  background-color: #ffffff;

  /*背景透明*/
  background-color: hsla(0,0%,100%,.7);

背景图

//让背景图适配视口很容易，需要使用下面 CSS 即可：

body {
  background-image: url('https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2253&q=80');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

使用多个背景图片

body {
  background-image: url(https://image.flaticon.com/icons/svg/748/748122.svg), url(https://images.unsplash.com/photo-1478719059408-592965723cbc?ixlib=rb-1.2.1&auto=format&fit=crop&w=2212&q=80);
  background-position: center, top;
  background-repeat: repeat, no-repeat;
  background-size: contain, cover;
}

三角形的背景图像

<body>
  <div class="day"></div>
  <div class="night"></div>
</body>

body {
  margin: 0;
  padding: 0;
}

div {
  position: absolute;
  height: 100vh;
  width: 100vw;
}

.day {
  background-image: url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2613&q=80");
  background-size: cover;
  background-repeat: no-repeat;
}

.night {
  background-image: url("https://images.unsplash.com/photo-1493540447904-49763eecf55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  background-size: cover;
  background-repeat: no-repeat;
  clip-path: polygon(100vw 0, 0% 0vh, 100vw 100vh);
}

添加叠加渐变

body {
  background-image: 
    linear-gradient(4deg, rgba(38,8,31,0.75) 30%, rgba(213,49,127,0.3) 45%, rgba(232,120,12,0.3) 100%),
    url("https://images.unsplash.com/photo-1503803548695-c2a7b4a5b875?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center
}

网格背景图像

<body>
<div class="container">
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
  <div class="item_img"></div>
  <div class="item"></div>
</div>
</body>

body {
 margin: 0;
  padding: 0;
}

.container {
  position: absolute;
  width: 100%;
  height: 100%;
  background: black;
  display: grid;
  grid-template-columns: 25fr 30fr 40fr 15fr;
  grid-template-rows: 20fr 45fr 5fr 30fr;
  grid-gap: 20px;
  .item_img {
    background-image: url('https://images.unsplash.com/photo-1499856871958-5b9627545d1a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2207&q=80');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}
}

vue全局背景颜色

mounted() {
  document.querySelector('body').setAttribute('style', 'background-color:#f7f7f7')
},
beforeDestroy() {
  document.querySelector('body').removeAttribute('style')
}

浮动 float

float: left;

字体 font

/* 字体颜色 */
  color: #888888;
/* 字体粗细 */
  font-weight: 400;
/* 字体大小 */
  font-size: 14px;
/* 文字居中 */
  text-align: center;
/* 字体行内居中 */
  line-height: 45px;

 /*字体加深*/
 text-shadow: 0 0 1px rgba(0,0,0,.3);

 /*起始段落空2格*/
 text-indent: 2em;

字体发光

 color: white;
                    text-shadow:
                            0px 0px 5px white,
                            0px 0px 5px white,
                            0px 0px 5px white,
                            0px 0px 20px rgba(171, 126, 177, 0.7),
                            0px 0px 20px rgba(171, 126, 177, 0.7),
                            0px 0px 20px rgba(171, 126, 177, 0.7),
                            0px 0px 20px rgba(171, 126, 177, 0.7);

margin | padding

/* 外边距 */
  margin: 60px 0 0 -40px;
/* 居中显示 */
  margin: 0 auto;
/* 向下10px */
  margin-bottom: 10px;
/* 外边距 */
  padding: 15px 0 10px 12px;

透明

 opacity: 0.9;

边框 border

/* 边框宽度1px 样式 颜色 */
  border: 1px solid #868686;
/* 边框边角弧度 */
  border-radius: 5px;
/* 边框下划线 */
  border-bottom: 1px solid #edeef0;
/* 样式 1px */
  border-style: ridge;
  border-width: 1px;

border-radius 的斜线语法

.border-radius {
  border-radius: 50px 25px / 25px 50px;
}

背景3d边框

 -webkit-box-sizing: border-box!important;
        box-sizing: border-box!important;
        overflow: hidden!important;
        border-radius: 2px!important;
        -webkit-box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12)!important;
        box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12)!important;

实线边框

    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
    box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);

2D动画

动画效果

 /* 动画效果 */
  transition: all 5s;

动画触发

:hover {
  /* 放大2倍 */
  /* transform: scale(2, 2); */
  /* 旋转 */
  transform: rotate(720deg);
  /* 上移 */
  transform: translateY(-3px);
}

box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.3);

transition

颜色渐变

    父标签
   -webkit-transition:background-color .5s ease-in;
	-moz-transition:background-color .5s ease-in;
	transition:background-color .5s ease-in;

    
    :hover{background-color:#bbb;}

3D动画

3D转换 translate3d

transform: translate3d(0,100px,100px);

透视 perspective

/* 透视写在被观察元素的父盒子上面 */
perspective: 500px;

旋转 rotate3d

  transform: rotateX(45deg);
  transform: rotateY();
  transform: rotateZ();
  /* 自定义 */
  transform: rotate3d(x,y,z,deg);

3d呈现 transform-style

  /* 让子元素保持3d立体空间环境 */
transform-style: preserve-3d;

img

设置图像的最大宽度

img {
    max-width: 100%;
}

悬停放大图片特效

.img-wrapper img {
  -webkit-transition: 0.3s linear;
  transition: 0.3s linear;
}

.img-wrapper img:hover {
  transform: scale(1.1);
}

颜色过滤

/* ============== 
* 灰度过滤 
* ==============*/
.grayscale-img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.grayscale-img:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

/* ============== 
* 深褐色过滤
* ==============*/
.sepia-img {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
}

.sepia-img:hover {
  -webkit-filter: sepia(0);
  filter: sepia(0);
}

定位

元素固定

@media (min-height: 500px) {
    .site-header {
        position: sticky;
        top: 0;
        /*other styles*/
    }
}

码农公寓

优先级

选择器

标签选择器

ID选择器

属性选择器

后代选择器 element element

子选择器 element>element

相邻兄弟选择器 element+element

一般兄弟选择器 element1~element2

伪类选择器

伪元素选择器

动画简写属性

background

背景图

使用多个背景图片

三角形的背景图像

添加叠加渐变

网格背景图像

vue全局背景颜色

浮动 float

字体 font

字体发光

margin | padding

透明

边框 border

border-radius 的斜线语法

背景3d边框

实线边框

2D动画

动画效果

动画触发

transition

3D动画

3D转换 translate3d

透视 perspective

旋转 rotate3d

3d呈现 transform-style

img

设置图像的最大宽度

悬停放大图片特效

颜色过滤

定位

元素固定

相关文章