CSS的选择器和文本样式

已注销
117 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第13天，点击查看活动详情

基础选择器

能够在HTML中选择元素

  1. 标签选择器

例如 p {
color="red";
}

  1. 类选择器

例如 .classname {
color="red";
}

  1. id选择器

例如 #idname {
color="red";
}

  1. 通配符选择器

* {
color="red";
}
最常用的是类选择器，可有效的减少代码冗余度

字体和文本样式

使用字体和文本相关样式修改元素外观样式
字体

  1. 字体大小：font-size

取值：数字+px
谷歌默认字体大小16px；
单位需要设置，否则无效；

  1. 字体粗细：font-weight

取值：normal(400)、bold(700) 或者 100~900(整百数)
不是所有字体都提供了9种粗细，部分字体取值页面中无变化

  1. 字体样式：font-style

取值：normal、italic(倾斜)

  1. 字体类型：font-family

无衬线字体（sans-serif）：黑体、Arial；
衬线字体（serif）：宋体、Times New Roman；
等宽字体（monospace ）：Consolas、fira code ；
如果字体名字存在多个名字，推荐用引号包裹

  1. 字体类型：font属性连写

font: style weight size family
例如：font: italic 800 35px 斜体,楷体,sans-serif;

文本样式

  1. 文本缩进：text-indent

取值：数字+px、数字+em（1em=当前标签的font-size的大小）

  1. 文本水平对齐方式：text-align

取值：left、center、right

  1. 文本修饰：text-decoration

取值：underline：下划线 line-though：删除线 overline：上划线 none：无装饰线（可去除a标签的下划线

行高
控制行间距 line-height

取值：数字+px、倍数（当前font-size的倍数）
网页精准布局时，会设置line-height:1可以取消上下间距
行高于font连写：如果同时设置了行高和font连写，注意覆盖问题(或者把line-height卸载font的下面)
font: style weight size/line-height family

文本样式小总结：

  1. text-align:center
    使用范围：文本、span标签、a标签、input标签、img标签

让以上元素水平居中，text-align:center需要给以上元素的父元素设置：理解如下示例

 <style>
        .box{
            width: 500px;
            height: 500px;
            background-color: seagreen;

            text-align: center;
        }
    </style>

</head>
<body>
    <div class="box"> 
        <span>我是一个sapn标签</span>
        <a href=" ">我是一个a标签</a>
    </div>
</body>

水平方法居中：margin:0 auto

如果需要div、p、h（大盒子）水平居中，可以通过此实现
直接给当前元素本身设置即可
margin:0 auto 一般针对于固定宽度的盒子，如果大盒子没有宽度，会默认占满父元素的宽度

小拓展--颜色的常见取值

如：文字颜色：color、背景颜色：background-color

表示方法

  1. 关键词
  2. rgb表示法：0-255
  3. rgba表示法：即rgb+a（0-1 透明度）,rgba(255, 255, 255, 0.2) 0.2可写成.2----0可省略
  4. 十六进制表示法：#开头的表示法，#000000

思考总结

最常用的是类选择器，可有效的减少代码冗余度；
使用字体和文本相关样式修改元素外观样式；
我也在不断的学习css中，css最最基础的就想出了这些知识；

avatar
文章
阅读
粉丝