前端学习-CSS简单用法_css前台用法-CSDN博客

本文链接：https://blog.csdn.net/qq_40442137/article/details/125558501

本文详细介绍了CSS的各种选择器类型，包括标签、类、ID、全局等选择器，并讲解了如何使用这些选择器来设置元素的样式。同时，文章还探讨了不同类型的样式表以及CSS背景属性的使用方法。此外，还提供了关于元素定位、溢出处理、居中对齐技巧等内容。

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

/*
1、标签选择器（如：body,p,p,ul,li）。

2、类选择器（如：class=“head”,class=“head_logo”） 。

3、ID选择器（如：id=“name”,id=“name_txt”）。

4、全局选择器（如：*号）。

5、组合选择器（如：.head .head_logo,注意两选择器用空格键分开）。

6、继承选择器（如：p p,注意两选择器用空格键分开）。

7、伪类选择器（如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。）
*/

/*样式表分为三类

  1.外部样式表 就是写在单独的CSS文件里
  2.内部样式表 就是写在html文件的头部
  3.内联样式表 就是写在标签里面
 */

/*
CSS 背景
background-color
background-image
background-repeat
background-attachment
background-position
*/


/* a:link {color:#000000;}      未访问链接*/
/* a:visited {color:#00FF00;}  已访问链接 */
/* a:hover {color:#FF00FF;}  鼠标移动到链接上 */
/* a:active {color:#0000FF;}  鼠标点击时 */

/*
position 属性指定了元素的定位类型。

position 属性的五个值：

static
relative
fixed
absolute
sticky

div.static {
    position: static;
    border: 3px solid #73AD21;
}
CSS Overflow
CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

overflow属性有以下值：

值  描述
visible    默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto   如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit    规定应该从父元素继承 overflow 属性的值。


要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。

如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;

左右对齐 - 使用定位方式
我们可以使用 position: absolute; 属性来对齐元素:

左右对齐 - 使用 float 方式
我们也可以使用 float 属性来对齐元素:

垂直居中对齐 - 使用 padding
CSS 中有很多方式可以实现垂直居中对齐。 一个简单的方式就是头部顶部使用 padding:

垂直居中 - 使用 line-height

CSS3 圆角
使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义



translate()
rotate()
scale()
skew()
matrix()
*/