CSS

最新推荐文章于 2024-09-28 15:35:33 发布

GoldenPigGirl

最新推荐文章于 2024-09-28 15:35:33 发布

阅读量135

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/goldenpiggirl/article/details/106002862

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS

程序就像是一个人一样css是用来给她化妆的想让她变成什么样就给她添加css样式

CSS英文名：Cascading Style Sheets

中文名:汉式层叠样式表

作用：用于修饰网页信息的显示样式，控制网页的外观；

组成：选择器+一条声明；

选择器：表明要应用规则的元素；

声明：用于表明应该如何显示选择器指定的元素；

语法结构：选择器{属性：属性值} 例：{p:color:#000;}

样式表的种类：1.内部样式表 2.外部样式表 3.行内样式表

CSS 指层叠样式表 (Cascading Style Sheets)，样式定义如何显示 HTML元素，样式通常存储在样式表中，把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题，外部样式表可以极大提高工作效率，外部样式表通常存储在 CSS 文件中，多个样式定义可层叠为一。

选择器

选择器

通配符选择器 *{}
标签选择器：p{}
类别选择器：.classname{}
ID选择器：#idname{}
伪类选择器： ：link{} :visited{} :hover{} :active{} 巧记 L-V-H-O
群组选择器：h1,h2,p{}
后代选择器：div a{}
选择器的优先级：id>class>标签

通用元素选择器
" * " 表示应用到所有的标签
标签选择器
匹配所有使用 div 标签的元素（可以匹配所有标签）
id选择器
Id选择器以#来定义

class选择器
类选择器以一个“ . ”号来定义
匹配所有class属性中包含info的元素。

语法：.类名{样式}（类名不能以数字开头，类名要区分大小写。）
组合选择器
1.多元素组合选择器
同时匹配两个或多个标签，用逗号隔开

2.后代元素选择器
匹配所有div标签里嵌套的P标签，之间用空格分隔。

3.子代元素选择器
匹配所有div标签里嵌套的子P标签，之间用>分隔。

4.毗邻元素选择器
匹配所有紧随div标签之后的同级标签P，之间用+分隔（只能匹配一个）。
5.属性选择器
[title] & P[title]
设置所有具有title属性的标签元素；
设置所有具有title属性的P标签元素。
6. 伪类选择器：

link、hover、active、visited
a:link（未访问的链接状态）,用于定义了常规的链接状态。
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
a:active（在链接上按下鼠标时的状态）。
a:visited（已访问过的链接状态）,可以看出已经访问过的链接。
before、after
P:before 在每个p元素的内容之前插入内容;
P:after 在每个p元素的内容之后插入内容。

文字属性：

字体颜色：color:#000;
字体类型：font-family:Arial/Verdna/sens-serif; 默认的是：Arial
字体大小：font-size:12px;
粗体：font-weight:normal普通显示/bold粗体显示;
斜体：font-style:normal普通显示/italic斜体显示/oblique倾斜;
文字大写：text-transform:uppercase;
文字小写：text-transform:lowercase;

段落属性：

文本缩进：text-indent:2em/-2em;//可正可负
文本对齐：text-align:center/left/right;
文本修饰：text-decoration:none/underline/overline/line-through;
行高：line-height:20px;
字符间距:letter-spacing:2px;
词间距：word-spacing:2px;

背景属性：

背景颜色：background-color:#f00;
背景图片：background-image:url(“路径”);
背景平铺：background-repeat:repeat(默认)/no-repeat(不平铺)/repeat-x(水平平铺)/repeat-y(垂直平铺);
背景位置：background-position:left/center/right/top/bottom/数值;
背景属性的缩写写法：background:url(路径) no-repeat center top;

列表属性：

list-style-type:none;清除列表的项目符号
list-style-img:url(路径);将一个图片作为项目符号使用
list-style-position:;表明项目符号显示的位置
list-style:disc;小圆点
list-style:circle;实心小圆点
list-style:square;实心正方形

CSS盒子模型

Margin(外边距) - 清除边框外的区域，外边距是透明的。

margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px;

Border(边框) - 围绕在内边距和内容外的边框。

border-style:solid; border-width:5px;

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

padding-top:25px;

padding-bottom:25px;

padding-right:50px;

padding-left:50px;
在这里插入图片描述
CSS显示与隐藏

visibility:hidden; 隐藏元素，但是会影响布局

display:none; 隐藏元素且不会占用任何空间

display:inline;

display:block;

CSS定位

position:fixed;元素位置是固定的，即使窗口滚动，它也不会变动

position:relative;元素位置相对于其正常位置进行变动

position:absolute;元素位置相对于其最近的已定位的父元素，父元素没有定位则位置相对于整个html

定位：

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
语法：选择符{position:value;}
static：默认。标准文档流，默认值，无特殊定位，处于文档流中。
relative:相对定位。不脱离文档流，以自身的位置进行偏移。
absolute:绝对定位。脱标不占位，相对于具有定位属性的父级元素（除了静态定位）偏移。如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位。
fixed:固定定位。是绝对定位的一种特殊形式，以浏览器窗口作为参照物。
注：固定定位始终以浏览器窗口为参照物，不管浏览器的滚动条如何滚动，也不管浏览器窗口大小如何变化它始终以浏览器窗口作为参照物。

浮动：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

float:left/right;

float:left;左浮动，使块元素在一行显示。

float:right;右浮动，使块元素在一行显示。

常用属性：

border

width （宽） height （高）
颜色 border-color ;

样式：border-style: dotted solid dashed none;
宽度：border-width: 2px;
border:宽度颜色样式（不能省略）
上边框颜色 border-top-color:
下边框复合属性 border-bottom:

边距和填充
外边距 margin
设置元素外边距的宽度
margin-top\bottom\left\right
margin 复合属性，顺序为上右下左
padding内边距
内容和边框之间的的距离
padding-top\bottom\left\right
padding 复合属性上右下左

z-index属性
设置元素的层叠顺序，属性值为无单位的整数值，值较大的元素会叠加在值较小的元素之上
元素可拥有负的z-index属性值，默认值是：auto,默认层是：0层
当没有设置、属性或者层数相同时，后面的元素显示在上面
z-index的属性值，只能为整数，正整数，0，负整数

display属性
none不显示
inline-block行内块元素
block块元素
inline行内元素

overflow属性
指定对于盒中容纳不下的内容的显示方式
visible可见（默认值）
hidden隐藏
scroll滚动-一定出现滚动条
auto自动-按需出现滚动条

visibility 属性
设置可见性
visible：设置对象可视
hidden：设置对象隐藏

visibility:hidden与display:none的区别
visibility:hidden设置不可见的元素也会占据页面上的空间
display:none不可见的元素, 属性不占据页面空间

CSS图片透明度

opacity:0-1;

css3新特性总结

圆角边框
border-radius:5px;

多背景图
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;

颜色和透明度(由原来的rgb到现在的rgba)
background: rgba(0,0,0,.5);

多列布局和弹性盒模型
display: flex;

盒子的变幻（2D、3D）
ransform: translate(50px,100px);//移动
transform: rotate();//旋转
transform: scale();//缩放
transform: skew();//倾斜

过渡和动画
transition: width 1s linear 2s;
animation: myfirst 5s;
@keyframes myfirst {
0% {background: block;}
25% {background: red;}
50% {background: yellow;}
100% {background: green;}
}

引入web字体（在服务器端存储）
@font-face {
font-family: myfirstfont;
src: url(sansation_light.woff);
}
div {
font-family: myfirstfont;
}

媒体查询
body{
background: yellow;
}
@media screen and (max-width: 480px){
background: red;
}

阴影
h1 {//文字阴影
text-shadow: 5px 5px 5px red;
}
div {//盒子阴影
box-shadow: 10px 5px 5px yellow;
}