蓝桥杯c3

最新推荐文章于 2024-07-19 15:50:46 发布

Lemon030923

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量175

点赞数 6

文章标签：蓝桥杯职场和发展 css

本文链接：https://blog.csdn.net/qq_62087717/article/details/136751165

版权

css基础语法

标签名 {
  属性名: 属性值;
}
标签选择器，直接用标签名如body等


.类名 {
  属性名: 属性值;
}
类选择器，与class对应


#id 选择器名 {
  属性: 属性值;
}
id选择器，与类选择器用法类似，与id对应，两者不同的是，id在html中唯一，class可以重复
优先级： id>class>标签名

此外还有后代选择器和群组选择器


background-color
用于设置背景颜色
background-image: url("moon.jpg");
background-size: 300px 300px;
设置背景图片和背景大小
background-position: center;
可以改变图像在背景中的位置
background-repeat
设置图片是否重复平铺，默认重复
repeat	背景图像将在垂直方向和水平方向重复（默认值）
repeat-x	背景图像将在水平方向重复
repeat-y	背景图像将在垂直方向重复
no-repeat	背景图像将仅显示一次


line-height 
用于设置两行字之间的空白
normal：取决于用户端。
number：数字乘以元素的字体大小。
length：指定长度用于计算高度。
%：计算值是给定的百分比值乘以元素计算出的字体大小。


.item5{text-decoration: dashed underline lime 5px}
text-decoration:用于设置字体下划线样式，颜色，大小等


        font-size: 20px;
        font-family: 隶书;
        line-height: 28px;

        font: italic 16px 华文彩云;
font用于设置字体的各种样式，可以分开可以一个font全设置完



伪类，一‘元素:状态’的使用方式，给某些元素添加特殊的状态，演示超链接的伪类
 a:link{
        text-decoration: none;
    }
    a:visited{
        color: green;
        text-decoration: none;
    }
    a:hover{
        color: black;
        text-decoration: underline;
    }
    a:active{
        color: red;
        text-decoration: line-through;
    }
一共有四个状态
a:link	普通的、未被访问的链接。
a:hover	鼠标指针位于链接的上方。
a:active	链接被单击的时刻。
a:visited	用户已访问的链接。
使用顺序:link - :visited - :hover - :active。


list-style列表样式
ist-style在一个声明中设置所有的列表属性
list-style-image	URL、none	设置图像为列表项标志
list-style-position	inside、outside、inherit	设置列表中列表项标志的位置
list-style-type	disc（默认）、circle、square、decimal 等	设置列表项标志的类型

盒子模型

该模型包括边框（border）、内边距（padding）、内容（content）、外边距（margin）、宽和高等属性

border边框属性，同样可以单独定义，也可以复合定义
border-width：是边框宽度，宽度一般用数值即可。
border-style：是边框线的样式，一般有 solid（实线）、dotted（圆点）、dashed（虚线）、double（双横线）。
border-color：是边框线的颜色。
此外这些仍然还是复合属性，可以单独定义某一边边框的属性
border-top-color: 上边框颜色;
border-right-color: 右边框颜色;


padding（内边距）也是复合属性，用于内容和边框的填充，区别margin（外边距）
padding: 上右下左;

padding-top: 顶部填充值;
padding-left: 左边填充值;
padding-right: 右边填充值;
padding-bottom: 底部填充值;


maigin：外边距
/*上边距*/
margin-top: 属性值;
/*左边距*/
margin-left: 属性值;
/*右边距*/
margin-right: 属性值;
/*下边距*/
margin-bottom: 属性值;
也可以单独设置：margin: 上边距 右边距 下边距 左边距;
margin: 上边距 左右边距 下边距;
margin: 上下边距 左右边距;
margin: 属性值;

display属性

该属性用于设置元素在页面上的排序方式，也可以用来隐藏元素

block	元素以块级方式展示。
inline	元素以内联方式展示。
inline-block	元素以内联块的方式展示。
none	隐藏元素。


    display: block;
   block属性让行内元素以块级元素方式显示


display: inline;
inline属性恰恰相反，让块级元素以内联形式显示


display: inline-block;
两种排列方式的融合，既可以内联，又有块属性可以设置长和宽，常用于导航栏的a标签


display: none;
隐藏页面上属性

浮动与定位

使用float使元素沿着容器左右浮动

float: left|right;
左浮动或者右浮动

使用position属性对元素进行定位，一共四种定位方式

静态定位（inherit）
相对定位（relative）
绝对定位（absolute）
固定定位（fixed）

默认静态定位

position: fixed;
实现固定定位，元素不会随着滑动条的滑动改变位置，一直出现在屏幕的固定位置，也是相对于屏幕进行定位


position: relative;
实现相对位置，以原先默认的位置做为参考进行位置计算


   position: absolute;
实现绝对位置，相对于屏幕进行定位，区别于相对位置

css3新特性

以正则表达式为基础的属性选择器
E[attr^=“xx”]	选择元素 E，其中 E 元素的 attr 属性是以 xx 开头的任何字符。
E[attr$=“xx”]	选择元素 E，其中 E 元素的 attr 属性是以 xx 结尾的任何字符。
E[attr*=“xx”]	选择元素 E，其中 E 元素的 attr 属性是包含 xx 的任何字符。
        a[href^="#"]{
            color: aqua;
        }

        a[href$="org"]{
            color: beige;
        }

        a[href*="un"]{
            background-color: blue;
        }
attr为被选择的属性值此外还有子元素伪类选择器和ui伪类选择器：使用方法都是"元素：状态"
E:first-child	选择元素 E 的第一个子元素。
E:last-child	选择元素 E 的最后一个子元素。
E:nth-child(n)	选择元素 E 的第 n 个子元素，n 有三种取值，数字、odd 和 even。注意第一个子元素的下标是 1。
E:only-child	选择元素 E 下唯一的子元素。
E:first-of-type	选择父元素下第一个 E 类型的子元素。
E:last-of-type	选择父元素下最后一个 E 类型的子元素。
E:nth-of-type(n)	选择父元素下第 n 个 E 类型的子元素，n 有三种取值，数字、odd 和 even。
E:only-of-type	选择父元素唯一的 E 类型的子元素。
E:nth-last-child(n)	选择所有 E 元素倒数的第 n 个子元素。
E:nth-last-of-type(n)	选择所有 E 元素倒数的第 n 个为 E 的子元素。

:focus	给获取焦点的元素设置样式。
::selection	给页面中被选中的文本内容设置样式。
:checked	给被选中的单选框或者复选框设置样式。
:enabled	给可用的表单设置样式。
:disabled	给不可用的表单设置样式。
:read-only	给只读表单设置样式。
:read-write	给可读写的表单元素设置样式。
:valid	验证有效。
:invalid	验证无效。


text-shadow: x-offset y-offset blur color;
设置文本阴影，前两个表示x和y轴上的偏转距离，必须参数，第三个为阴影程度，也就是模糊度使用px即可，第四个为颜色都是非必须


text-overflow: clip|ellipsis;
用于设置溢出的文本部分，前者为剪切，后者为省略


border-radius: 取值;
border-top-left-radius: 取值;
border-top-right-radius: 取值;
border-bottom-right-radius: 取值;
border-bottom-left-radius: 取值;
用于设置边框的圆角，复合属性


box-shadow: h-shadow v-shadow blur spread color inset;
用于设置盒子阴影，原理和文字阴影一样
h-shadow	必选，水平阴影的位置，允许负值。
v-shadow	必选，垂直阴影的位置，允许负值。
blur	可选，模糊距离。
spread	可选，阴影的大小。
color	可选，阴影的颜色。
inset	可选，将外部阴影改为内部阴影。
注意顺序，顺序错误无法显示
水平-竖直-程度-距离-颜色-内部


background-size: length|percentage|cover|contain;
用于设置背景图片大小
length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置高度。如果只给出一个值，第二个是设置为 auto（自动）。
percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置高度。如果只给出一个值，第二个是设置为"auto（自动）" 。
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。


background-image: url(), url(), ..., url();
background-image可以设置多张图片作为背景
background-position设置图片位置
background-repeat设置图片是否重复，如下：

background-image: url(icons8-rat-96.png),url(nemuel.jpg);
background-position: right bottom,left top;
background-repeat: no-repeat,no-repeat;


 background-image: linear-gradient(#ff577f, #c6c9ff);
从上到下
   background-image: linear-gradient(to right, #ff9d72, #c6c9ff);
从左到右
       background-image: linear-gradient(to bottom right, #8ad7c1, #c6c9ff);
从 左上到 右下
      background-image: linear-gradient(50deg, #bc6ff1, #ffd5cd);
自定义角度
此外还有在所有方向重复的渐变：
background-image: repeating-linear-gradient(side-or-corner|angle, color-stop);


向元素中心的渐变，
background-image: radial-gradient(ellipse|circle,green,blue)
有圆形和椭圆两个形状，衍射可以设置很多个
background: repeating-radial-gradient(extent-keyword, color-stop);
同样也有重复的渐变，第一个参数设置相切位置（可省略），第二参数设置颜色

元素旋转：
transform: rotate(角度); /*元素按照指定角度旋转*/
可正可负
transform: rotateX(角度);
transform: rotateY(角度);
此外还有XY轴的旋转函数
注意这里的旋转不是动画，只是最后的结果


transform: translate(移动值); /*元素按照指定值沿着 X 轴和 Y 轴移动*/同时设置两个值
transform: translateX(移动值); /*元素按照指定值沿着 X 轴移动*/
transform: translateY(移动值); /*元素按照指定值沿着 Y 轴移动*/
移动函数


transform: scale(缩放值); /*元素按照指定值沿着 X 轴和 Y 轴缩放*/
transform: scaleX(缩放值); /*元素按照指定值沿着 X 轴缩放*/
transform: scaleY(缩放值); /*元素按照指定值沿着 Y 轴缩放*/
缩放函数，大于1为放大，小于1缩小


transition-property: 属性值; /*指定属性名*/
transition-duration: 属性值; /*完成过渡这一过程的时间*/
transition-timing-function: 属性值; /*速度曲线*/
transition-delay: 属性值; /*过渡的开始时间*/
设置过渡


动画：
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 "ease"。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。
  
@keyframes action {
        0% {
          margin-left: 400px;
        }
在关键帧处可以自由设计样式

弹性盒子（flex布局）

display：flex为弹性盒子，main axis为主轴，从左到右，cross axis为辅轴，从上到下

flex-direction: row | row-reverse | column | column-reverse;
设置元素的排列方式，分别为横，横反转，纵，纵反转


flex-wrap设置元素的排列方式，默认单行不换行
nowrap	默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap	弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行。
wrap-reverse	反转 wrap 排列。


align-items: flex-start | flex-end | center | baseline | stretch;
用于设置元素在纵轴的对齐方式
flex-start	弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end	弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center	弹性盒子元素在该行的侧轴（纵轴）上居中放置。
baseline	如弹性盒子元素的行内轴与侧轴为同一条，则该值与 flex-start 等效。其它情况下，该值将参与基线对齐。
stretch	纵向拉伸对齐


align-content: flex-start | flex-end | center | space-between | space-around |
  stretch;
设置多行的对齐方式

网格布局（grid）

display：grid设置网格布局
grid        块级
inline-grid 行内


（定义格子大小）
grid-template-columns
grid-template-rows
分别设置每个格子的长宽，有几个格子需要设置几个参数
repeat() 可以简化重复的设置，第一个参数为重复次数，第二个参数大小
此外还有一些属性
auto-fill 关键字
  grid-template-columns: repeat(auto-fill, 100px);自动填充

fr 关键字
 grid-template-columns: 1fr 1fr;
表示后者是前者的两倍
minmax()
minmax() 函数指定一个长度范围，表示长度就在这个范围之中
auto 关键字
auto 关键字表示由浏览器自己决定长度


（定义格子间距）
grid-row-gap、grid-column-gap 和 grid-gap 属性
分别用于设置行间距和列间距


grid-template-areas: 'a b c'
                     'd e f'
                     'g h i';
直接定义区域
grid-template-areas: 'a a a'
                     'b b b'
                     'c c c';
几个区域合并
grid-template-areas: 'a . c'
                     'd . f'
                     'g . i';
“.”的区域不需要利用


grid-auto-flow: row|column;
设置先行后列还是先列后行
grid-auto-flow: row dense;
加dense表示尽量不留空行


（内容在内容格）
.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}
设置单元格内容的对齐方式，justify-items为水平
                      align-items为竖直
属性值分别是开头，居中，结尾，拉伸填充
place-items是他俩的简写属性


（内容区域在容器，区别上面）
.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}
start：对齐容器的起始边框。
end：对齐容器的结束边框。
center：容器内部居中。
stretch：项目大小没有指定时，拉伸占据整个网格容器。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
space-between：项目与项目的间隔相等，项目与容器边框之间没有间隔。
space-evenly：项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。


justify-self 属性设置单元格内容的水平位置（左中右），跟 justify-items 属性的用法完全一致，但只作用于单个项目。
align-self 属性设置单元格内容的垂直位置（上中下），跟 align-items 属性的用法完全一致，也是只作用于单个项目。