CSS常用设置-基础内容_css 通用设置-优快云博客

本文链接：https://blog.youkuaiyun.com/bigH2004/article/details/144315299

CSS导入方式

1.内联样式

比如

<p style="color: red; font-size: 16px;">这是一个带有内联样式的段落。</p>

语法为style = "属性:样式;属性:样式",主要部分引号包起来，里面为键值对的形式，用分号分隔不同的属性

2.内部样式表

比如

<head> 
    <style>
         body {
             background-color: lightblue;
         }
         p {
             color: blue; 
        }
     </style>
 </head>

语法为：

选择器{

        属性:值;

}

3.链接外部样式表

比如

<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

然后把内容写在styles.css文件中

css常见选择器

元素选择器

元素 {
    ...
}

类选择器

.类名{
    ...
}

id选择器

#id名{
    ...
}

（伪类）

用法

加在选择其后面，进行进一步筛选

动作相关伪类

:hover 加在选择器后面，表示在鼠标放到这个元素上面时的属性

:focus 当元素获得焦点（例如通过键盘导航或表单元素被激活）时应用的样式。

:active 当元素被激活（如点击按钮时）时应用的样式。

状态相关伪类

:checked：适用于复选框、单选按钮等表单元素，当它们被选中时应用的样式。

:disabled：适用于禁用的表单元素，比如不可用的按钮或输入框。

:enabled：与:disabled相反，适用于可用的表单元素。

:visited：适用于已经访问过的链接，可以改变已访问链接的颜色或其他样式。注意，出于隐私考虑，浏览器对:visited样式的支持有限，不能修改像宽度、高度这样的布局属性。

结构性伪类

:first-child：匹配作为其父元素的第一个子元素的元素。

:last-child：匹配作为其父元素的最后一个子元素的元素。

:nth-child(n)：根据指定的模式选择元素，例如选择所有偶数行或者奇数行。

:only-child：如果一个元素是其父元素的唯一子元素，则匹配该元素。

:nth-of-type(n)：基于类型选择元素，例如选择所有的第二个<p>标签。

:first-of-type：匹配其类型中的第一个同级元素。

:last-of-type：匹配其类型中的最后一个同级元素。

:only-of-type：如果一个元素是其父元素中唯一的该类型的子元素，则匹配该元素。

UI元素状态伪类

:indeterminate：适用于进度条或某些未确定状态的UI组件，比如没有明确选中或取消选中的复框。

:target：当URL的片段标识符（即哈希值）与某个ID相匹配时，应用于该ID的元素。

CSS常用属性

外边距(margin)

a b c d均为长度单位 px % em rem均可

也可以设置为auto一般用于水平居中

也可以为负值，代表超出容器

margin:a;上下左右均为a

margin:a b;上下为a，左右为b

margin:a b c;上为a，左右为b，下为c

margin: a b c d;上为a，左为b，下为c ，右为b

或者可以使用margin-top[right/left/bottom]对上[右/左/下]进行单独设置

如果相邻元素的margin值不同，则取其中的较大值

内边距padding

a b c d均为长度单位 px % em rem均可

！！！不可以设置为auto一般用于水平居中

padding:a;上下左右均为a

padding:a b;上下为a，左右为b

padding:a b c;上为a，左右为b，下为c

padding: a b c d;上为a，左为b，下为c ，右为b

或者可以使用padding-top[right/left/bottom]对上[右/左/下]进行单独设置