CSS入门

南工大第一帅哥
87 阅读2分钟

序言

CSS：层叠样式表

图片.png

将p标签的属性进行修改

图片.png

CSS引入方式

图片.png

外链式：stylesheet表示：关系为样式表

<head>
    <link rel = "stylesheet" href = "单独写的css的文件路径">
</head>

行内式：

<div style = "color:green;font-size:18px">
</div>

图片.png

基础选择器

标签选择器

图片.png

标签选择器：用标签名命名的选择器；他会选中所有该标签进行样式修改。

类选择器

避免标签选择器对所有的相同名字的标签进行样式修改。通过类选择器可以很好的设计样式，并且类名是可以重复的，可以为多个标签使用同一个类.

在style标签中通过.xxx来定义类选择器

图片.png

<style>
    .red{
        color:red;
    }
</style>
<p>无色</p>
<p class = "red">红色</p>

如果想要使用多个类选择器：

<style>
    .red{
        color:red;
    }
    .size{
        font-size:66px;
    }
</style>
<p>无色</p>
<p class = "red size">红色</p>

一个标签可以使用多个类名，用空格隔开就行

id选择器

id选择器具有唯一性！！！

图片.png

<style>
    #blue{
        color:blue;
    }
    
    
</style>
<div id = "blue">蓝色div</div>
<p id = "blue">可以变蓝色，但是搭配js会报错、因为id具有唯一性</p>

通配符选择器

图片.png

对所有的标签进行样式设计、用于去除标签默认存在的margin和padding：

图片.png

字体和文本样式

字体大小

一定记得要加上单位px！！！

图片.png

字体粗细

图片.png

数字和关键字表达的效果是一样的，更推荐使用数字形式。

700==》加粗；400==》正常

<style>
    div{
        font-weight:700;
    }
    p{
        font-weight:400
    }
    
</style>

字体样式是否倾斜

之前我们通过标签<i>或者<em>来控制倾斜，现在通过css也可以控制文字倾斜。

图片.png

字体系列font-family

windows默认是微软雅黑，我们可以修改字体样式

图片.png

图片.png

如果用户电脑没有安装微软雅黑，那么就按照黑体显示；

如果电脑没有安装黑体，那么就按任意一种非衬线字体系列显示！

<style>
    div{
        font-family:微软雅黑，黑体，sans-serif;
    }
</style>

样式层叠问题

如果给同一个标签设置了相同的样式，此时浏览器会如何渲染呢？

样式会层叠（覆盖），卸载最下面的会生效

图片.png

font复合属性

图片.png

如果我想改变复合类型中的某个样式，只需要在他下面重写即可

//font:style weight size 字体


<style>
    p{
        font:italic 700 66px 宋体;
        //重写font-style，不再是倾斜效果!
        font-style:normal
    }
</style>

文本样式

图片.png

文本缩进

图片.png

<style>
    p{
        文本缩进32px：首行缩进2字符；因为浏览器默认字符是16px
        text-indent:32px;
    }
</style>

如果使用em会更方便点，因为1em表示1个字的大小：

就算我页面的font-size改变，我的em任然会根据font-size来计算出字的大小。

<style>
    p{
        text-indent:2em;
    }
</style>

图片.png

水平对齐

图片.png

text-align：内容对齐方式，图片、文字、input标签、span标签都可以使用text-align来居中

图片.png

文本修饰

通常用来清除超链接的下划线

图片.png

<style>
    div{
        text-decoration:underline;
    }
    a{
        text-decoration:none
    }
</style>

行高

line-height：控制一行的上下行间距

图片.png

可以通过数字+px取值，也可以通过font-size倍数来设置

除了上下边距，还有文字大小=共同组成行高

<style>
    div{
        line-height:50px;
        //自己字号大小的1.5倍
        line-height:1.5;
    }
</style>

行高与font连写时注意覆盖问题： font:style weight size/line-height family

字号和行高用了斜杠隔开

颜色设计

图片.png

标签居中

图片.png

margin:0 auto;

avatar
文章
阅读
粉丝