CSS

最新推荐文章于 2025-07-17 23:38:53 发布

原创最新推荐文章于 2025-07-17 23:38:53 发布 · 92 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

CSS 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了CSS中的样式应用，包括导入方式（行内、内部、外部样式）、选择器（基本、类、ID、层次）以及各种伪类选择器的使用。此外，还讲解了如何美化网页元素，如字体样式、文本对齐、超链接伪类、列表样式、图像处理、盒子模型、渐变、响应式设计等。最后，提到了flex布局和grid布局的基本概念和属性设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.快速入门

1.1style

border-radius:10px 圆角

text-algin:center 文字对齐方式

text-decoration：none去下划线

margin-right/left:5px 外边框，往右/左

font :bold 20px/50px Arial;

风格粗体大小/行高字体（font-family)

<style>
    h1{
    color : red;
    }
</style>

<link rel="stylesheet" href="css/style.css">

1.2导入方式

1.2.1行内样式

<h1 style="color:red"></h1>

1.2.2内部样式

1.2.3外部样式

<link rel="stylesheet" href="css/style.css">

就近原则

谁离元素更近，谁生效

导入式

2.选择器

选择页面上某个或某类元素

2.1基本选择器

2.1.1标签选择器

h1 {
color : red;
}

2.2.2类选择器

格式: .class的名称{}

可以多个标签归类

类选择器

;

2.2.3id选择器

格式：#id{}

id唯一

id>class>标签选择器，不遵循就近原则

2.2层次选择器

树的结构

2.2.1后代选择器

body p {
    background : red;
}
<!--body后面全部p-->

2.2.2子选择器

body>p{
    background : red;
}
<!--body后面第一层p,p之后的不会受影响-->

2.2.3相邻兄弟选择器

.active + p{
 background : red;
}
class="active"的下面一个p

2.2.4通用选择器

.active ~ p{
 background : red;
}
class="active"的下面全部的兄弟元素

2.3结构伪类选择器

ul li:first-child{
    color: red;
}
ul li:last-child{
    color: red;
}
p:nth-child(1){
    color: red;
}p的父元素的第一个子元素，按顺序
p:nth-of-type(2){
    color: red;
}p的父元素的第二个p子元素，按类型

2.4属性选择器

a[id="123"]{
    
}
选择id="123"的a元素，或者

a[id]{
    
}
选择有id属性的a元素

= 绝对等于
*= 包含

a[class*="links"]{
    
}
class属性的值包含links

a[href^=http]{
    
}
以http开头

a[href$=pdf]{
    
}
以pdf结尾
正则表达式

3.美化网页元素

3.1

重点突出的内容用span标签

3.2字体样式

font-family:楷体
font-size:20px
font-weight:bolder
color:red

3.3文本样式

rgba A:0~1  透明度
color: rgba(0,23,34,0.3)
text-align: right/left/center 居中
text-indent: 2em 缩进
line-height: 30px 行高，一行的高度，块高度/行数=行高，对称
text-decoration:none/underline/line-through/overline
水平对齐 参照物 a,b
a,b{
    vertical-align:middle;
}
<a></a>
<b></b>

3.4超链接伪类

a:hover{
    color: red;
    font-size: 20px;
}
鼠标移上面时变色
a:active{
    
}鼠标按住的颜色

a:visited{
    
}点完之后的颜色

text-shadow: #3cc7f5 10px -10px 2px
阴影颜色 水平偏移（>0向右，<0向左），垂直偏移（>0向下） 阴影半径

3.5列表

list-style: none circle decimal  square 
            去原点 空心圆  有序列表  正方形

3.6图像

background-repeat:repeat-x repeat-y no-repeat平铺
background: color url() 200px 100px no-repeat
颜色 图片 位置 平铺方式

3.7渐变

grabient

3.8盒子

margin 外边距

padding 内边距

border 边框

3.8.1边框

body h2等默认有一个外边距

border: 2px solid black

宽度 实线/dashed虚线  颜色

border-top: 1px solid black
border-bottom
border-left right
border-collapse: collapse 合并相邻边框

浮动元素的伏击加上clear:both;

边框圆角
border-radius 边框圆角半径 设置为50%时为圆
              4个值 左上 右上 右下 左下
              
阴影
box-shadow: 右移  下移  模糊程度 为0px时不模糊  color颜色

形变transform
transform: rotate(2-deg) 旋转20°
transform: scale(1)缩放
transform: translate(50px，100px) 位移
transform: translate(-50%，-50%)居中 宽高都为200px
transform-origin： 0 0旋转原点

过渡效果
transition-property   过渡属性如transform
transition-duration  过渡持续时间
transition-timing-function  过渡函数  ease中间快  linear 匀速  ease-in开始慢 ease-out 结束慢  ease-in-out与easse类似，幅度比ease大
transition-delay  过渡延迟事件 1000ms
可简写，顺序按上面
transition: transform 1s,width 1s,height 1s

flex布局
容器属性
flex-direction：row横向排列 column纵向排列  row-reserve从右往左 column-reserve
flex-wrap换行规则：nowrap不换行会挤在一行 wrap 默认换行 wrap-reverse从最后一行开始排
justify-content：flex-start 左对齐 flex-end右对齐 center居中 space-between 对称   space-around与边框有间隔对称
align-items:交叉轴 flex-start flex-end center 垂直位置 竖直方向对齐方式
项目属性
flex-grow:设置比例 在容器中的占比
flex-shrink:项目大小超过容器时会等比例缩小，这个可设置缩小比例 值越大缩小越大
flex-basis: 占总的宽度或高度
align-self 允许单个项目与其他项目不一样对齐，可以覆盖align-items 默认属性为auto 


grid布局
grid-template-row:100px 100px 100px行高
grid-template-column:100px 100px 100px列宽

grid-template-row:100px 1fr 2fr 按比例填满剩余部分  列同理
grid-auto-flow排列方式
单元格元素属性
justify-items ：strench延伸列方向上
align-items 行方向上
单元格在整个grid中的位置
justify-content
align-content

grid-auto-row:50px溢出行的高度即上面用template定义了9个单元格，但实际有11个元素

合并单元格
grid-column:1/3 列合并 第一列和第二列
grid-row:1/3 行合并

justify-self
align-self


响应式页面 当屏幕宽度处于600到900之间时改变颜色
@media screen and(min-width:600px)and(max-width:900px){
  .box{
    background-color:red;
  }
}

父级设置 position:relative;
子级设置 position:absolute;可相对父级位置

响应式页面:一套页面根据窗口的不同而显示不同
bootstrap
媒体查询
@media screen and (max-width:600px){页面小于600px
  
}
@media screen and (min-width:600px) and (maxwidth:900px)//大于600小于900

移动端适配
1.设置百分比 计算繁琐
2.rem:相对于html标签的font-size 
fontsizeset.js根据设计稿修改宽度
em:相对于父级font-size 1em相当于font-size的大小，比如font-size:30px那么1em就是30px