CSS基础语法

最新推荐文章于 2022-07-06 19:01:22 发布

dislido

最新推荐文章于 2022-07-06 19:01:22 发布

阅读量407

点赞数

CC 4.0 BY-SA版权

分类专栏：学习笔记

本文链接：https://blog.youkuaiyun.com/dislido/article/details/76043669

学习笔记专栏收录该内容

23 篇文章

订阅专栏

本文介绍了CSS的基础语法，重点讲解了各种选择器的用法，包括标签选择器、类选择器、id选择器、属性选择器等，并探讨了后代、子代和同代选择器的差异。此外，还概述了CSS中的文本、背景和列表属性的应用。

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

CSS基础语法

选择器

标签选择器

p{
  color:red;
} /*选择所有<p>标签，字体设置为红色*/

类选择器

.red{
  color:red;
} /*选择所有class="red"的标签，字体设置为红色*/

id选择器

#red{
  color:red;
} /*选择id="red"的标签，字体设置为红色*/

属性选择器

div[id^=div]{
  color:red;
}/*选择id属性以div开头的div标签，字体设置为红色*/
/*
=  等于
^= 以开头
$= 以结尾
*= 包含
*/
div[class]{
  color:red;
}/*选择包含class属性的div标签，字体设置为红色*/

通配符选择器

*{
  color:red;
} /*选择所有元素，字体设置为红色*/

后代选择器

h1 strong{
  color:red;
} /*h1的所有strong子元素字体设置为红色*/

子代选择器

h1 > strong{
  color:red;
} /*h1的strong直接子元素字体设置为红色*/

同代选择器

h1 + p{
  color:red;
} /*与h1同级，紧跟h1后面的第一个p元素字体设置为红色*/
h1 ~ p{
  color:red;
}/*与h1同级，在h1后面的所有p元素字体设置为红色*/

伪类选择器

p:last-child{
  color:red;
} /*最后一个p元素字体设置为红色*/
:first-child /*第一个元素*/
:nth-child(2n-1) /*所有满足2n-1(n为整数)的元素（1,3,5,7...）*/
:nth-child(odd) /*第奇数个元素（2n-1）*/
:nth-child(even) /*第偶数个元素（2n）*/

:hover /*鼠标移到的元素*/
:link /*未访问的*/
:active /*活动的*/
:visited /*已访问的*/
:focus /*获取光标的*/
:enabled /*可用的*/
:disabled /*不可用的*/

属性

文本

color: red; /*文字颜色:红*/
font-weight: bold; /*文字宽度:粗*/
font-size: 50px; /*文字大小:50px*/
font-style: italic; /*文字样式:斜体*/
text-shadow: 2px 2px 2px yellow;/*文字阴影:水平偏移2px,垂直偏移2px,模糊距离2px,黄色*/
-webkit-text-stroke: 1px black; /*文字描边: 1px黑色*/

背景

background-color /*背景色*/
background-image /*背景图url('')*/
background-repeat /*背景图重复方式 repeat-x,repeat-y,norepeat*/
background-position /*位置坐标，偏移量*/
background-clip /*图片裁剪位置*/
background-origin /*图片原点位置 border-box,padding-box,content-box*/
background-size /*背景图大小
  x% y% 按容器比例缩放图片
  cover 等比例缩放至填满容器尺寸
  contain 等比例缩放至最大可完整显示图片尺寸
*/

列表

list-style /*列表样式 none,disc,circle,square,decimal*/