CSS基础

已注销
130 阅读5分钟

2021年6月9日

CSS 指的是层叠样式表 (Cascading Style Sheets)

CSS选择器:

id选择器： #id{}
类选择器： .classname{}
元素选择器 元素名{}           (多个元素中间用逗号：元素名1，元素名2，...元素名n { })

外部 CSS：使用link引入css文件
内部 CSS:在head标签内使用style元素来定义
行内 CSS（也称内联样式）：将 style 属性添加到相关元素style 属性可包含任何 CSS 属性。
例： <h1 style="color:blue;text-align:center;">This is a sentence.</h1>

假若同时定义了多种css样式，则优先级为：
行内css>内部css>外部css

注释：

css的注释以/*开始，*/结束，它也可以横跨多行
例：/* 这是 d 一条多行的
注释 */

外边距和内边距

外边距即margin属性用在任何定义的边框之外，为元素周围创造空间。
内边距即padding属性用在任何定义的边界内的元素内容周围生成空间。
image.png

display: inline-block

<ul>
   <li>谷歌</li>
   <li>必应</li>
   <li>百度</li>
   <li>索尼</li>
   <li>苹果</li>
</ul>

li作为块级元素，默认为display：block，每一个li都会换行，显示效果如下：

  • 谷歌
  • 必应
  • 百度
  • 索尼
  • 苹果
而如果想让这个列表横向显示，则需给每个`li`加上display:inline，将`li`元素由块元素转换为行内元素 
<style>
    ul li{
        display:inline;
    }
</style>

显示效果如下：

谷歌 必应 百度 索尼 苹果

在列表还不够好，他们之间的间隙太小，我想给每一个li设置一个宽度，给他加一个width:50px，问题来了，无论你设置多宽，它都不会生效，因为inline作为行内元素，没有width、height等属性，那怎么办，于是有了 display:inline-block，这个属性就解决了宽度设置不了的问题，同时保持li元素依然是横向排列。

<style>
    ul li{
        display:inline-block;
        width:50px
    }
</style>

显示效果如下：

谷歌    必应    百度    索尼    苹果

字体属性font

body{
    font: font-style font-weight font-size/font-height font-family;
    }
  • 使用font属性时，必须按顺序书写，不能更换顺序
  • 不需要设置的属性可以省略，但必须保留font-size和font-family属性，否则font属性将不起作用。

text-align           left   center   right  
text-ident           缩进中文使用em为单位，一般为2em  
text-decoration      none underline line-through overline  
line-height

选择器

后代选择器 (空格)         例：ul li{ }     也可以是孙子、重孙子    例： ul li p{ }

子选择器 (>)                 例：ul>li{ }     只能选择最近一级的子元素

并集选择器 (,)              例：div, p, ul>li{ }

伪类选择器 (:)
a:link           选择所有未被访问的链接
a:visited      选择所有已被访问的链接
a:hover       鼠标位于其上的链接
a:active       选择活动链接（鼠标按下但未弹起的链接）

单行文字垂直居中的原理

让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中。

height: 50px;
line-height: 5px;

image.png

背景

元素背景颜色

一般元素的默认背景颜色为透明，所以若不定义颜色或内容就看不到任何东西

background-color: transparent;
假如改变背景颜色则能看见:
background-color: gray;

背景图片的位置

image.png 1.参数是方位名词

如果指定的参数是方位名词，则两个值的前后顺序无关，如：left top与 top left 效果一致
如果只指定了一个方位名词，则另一个省略，则省略的那一个默认值为center
2.参数是精确单位
如果参数是精确单位，则第一个值为 x坐标，第二个值为 y坐标
如果只指定了一个精确数值，那么这个数值一定是x坐标，另一个省略的为x轴默认垂直居中 *注意：x 与 y 中间用空格隔开，而不是逗号

背景图像固定

background-attachment: scroll / fixed    (默认值为scroll)
scroll: 会随着屏幕的上下滚动而滚动
fixed: 会固定在屏幕中

背景的复合写法

background: background-color background-image: url() background-repeat background-attachment background-position
例：background:  transparent  url(image.jpg)  repeat-y  fixed  top;

背景颜色透明度

background:  rgba ( 0, 0, 0, 0.3 ); rgba中最后一个字幕a代表的是alpha透明度，取值范围在0 ~ 1之间

选择器权重

image.png

image.png

此时p标签文本内容的颜色结果为pink
#father作为ID选择器，权重为0,1,0,0   但我们这里关注的是p而非id选择器的权重
p标签继承了div，作为继承者，权重为0,0,0,0
同时p标签作为元素选择器，权重为0,0,0,1
综上，此时元素选择器p的权重大于所继承的权重，所以执行的是元素选择器即p标签所指定的样式，因此最终的字体颜色为pink而非red注意这里的权重是对于p而言，与div`无关

权重叠加

image.png

权重虽然会叠加，但永远不会有进位，而是会在每一位上叠加数量

div ul li { }    0,0,0,3
.nav ul li { }   0,0,1,2
a:hover { }      0,0,1,1
.nav a { }       0,0,1,1
avatar
文章
阅读
粉丝