CSS的常见样式

最新推荐文章于 2024-05-18 16:20:54 发布

pdxdhmk318

最新推荐文章于 2024-05-18 16:20:54 发布

阅读量51

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/pdxdhmk318/article/details/131882258

版权

一、字体样式

设置字体大小：

font-size：12px ；

}

字体：

font-family：“微软雅黑”；

}

字体粗细：

font-weight：400；-----正常效果，700加粗

}

字体样式：

font-style：italic；------italic指倾斜，默认是normal正常

}

连写（不推荐）：

style weight size famliy-------字号和字体必须同时存在，顺序不能乱

font-size：italic 400 20px '宋体'；------与上面的顺序对应

}

css层叠性：属性名相同时，会把后面的样式覆盖掉

二、文本样式

缩进：

text-indent：32em；----两个空格

}

用px-----字体大小不一样的就缩进不一样

使用：em---- 一个字符，text-indent：32em；

对齐方式：

.box1 {

text-align： center；-----居中的不是元素，是内容

}

若是<div class="box2">里的图片，设置样式：

.box2 {

width: 300px;

height: 400px;

background-color: pink;

}

三、文本修饰

清除链接样式：

<a>-----默认有下划线underline（实线soild）、蓝色字体样式

text-decoration：none；------下划线，none取消样式

}

Overline---上划线

--------清除a链接默认样式

text-transform---------字体转大小写

text-transform：uppercase； -----转大写

text-transform：lowercase； -----转小写

四、行高

行高指：

第一、二行中间到第二、三行中间的距离

line-height： 50px；

}

五、文本溢出

----------文本内容范围超出了元素的范围

overflow

overflow：auto------------x轴滚动

overflow：hidden---------溢出隐藏

overflow：scroll-----------y轴滚动

六、背景相关（未完成）

背景图片设置：

1.设置<body>大小、颜色

2.加图片

background-image：url（./…);

取消平铺：

背景图不够大时默认平铺重复，取消平铺：

background-repeat: no-repeat;

固定：

background-attachment：fixed；

背景定位：

background-position：right bottom；

复合属性：

background：pink url（） no-repeat；

背景大小：

background-size

background-size：cover；------背景强行占满body

七、列表样式

去除li的默认样式（实心小圆点）

list-style：none；

八、元素显示模式转换

行内元素不能设置宽高

Span------行内元素，不能设置宽高

将行内元素转换为行内块元素：

display：inline-block；-------inline行，block块

九、轮廓线

input的默认样式：聚焦后黑框（轮廓线）

设置轮廓线样式：

outline-style：设置轮廓线样式

outline-style：none；-----去除默认设置

outline-style：dotted-----虚线

outline-style：double-----双线条

outline-color：pink；----轮廓线颜色

outline-width：20px（也可以写thick）；-----轮廓线宽度

十、边框

----------整个元素外围的边框

border

div{

border-color：pink； -------------边框颜色

border-style:solid; -----------实线

border-top-left-radius：50px；-------左上边框弧度----------上下左右都可以设置

}

合并相邻边框：

设在表格<table>里

td {

设置样式

}

table {

border-collapse：collapse；

}

十一、颜色

前景色-----字体颜色

rgb三原色-----三个数值调的色

color：rgb（）--------括号里三个颜色或三个颜色数值

background-color: rgb（12，13，15，16）-----最后一个是透明度

透明度的表示方法：

1.rgb（12，13，15，16）-----最后一个是透明度

2. opacity：0.6--------取值0-1，等于0时，只是视觉上看不见，原来位置仍保留

十二、元素隐藏的方式

1、设置透明度隐藏

opacity：0；------保留原来位置

2. display

display：none;-------不保留原来位置

3. visibility

visibility :hidden；-----保留原来位置

十三、鼠标样式、防拖拽

textarea默认是可以拖拽的

textarea {

resize：none；-----防止拖拽

cursor: pointer------鼠标在框内的变化（变小手）

}