CSS基础（1）

象更

已于 2024-01-13 16:29:44 修改

阅读量394

点赞数 8

文章标签： css 前端 web

于 2024-01-12 22:47:33 首次发布

本文链接：https://blog.csdn.net/m0_74227060/article/details/135562002

版权

CSS组成

CSS包括选择器与多条声明。

选择器{

}

CSS基础选择器

用于选择标签；由单个选择器组成，包括标签选择器、类选择器、id选择器和通配符选择器。

标签选择器

选择器放在<style>里

但这种方法不能单独选择某个标签

类选择器

.类名{

}

运用class属性：

当当当当！

注意：不要使用纯数字和中文命名！

利用类选择器画盒子，可作为背景

多类名

使用方法：

应用场景：

有利于统一修改。

id选择器

使用方法：

#green{

}

区别于class，id只能调用一次，此id不可再次出现，是唯一的。

而class可以重复。

通配符选择器

统配选择器使用*定义，表示选取页面中所有元素（标签）

}

CSS字体属性

字体

font-family	可显示不同字体，若第一个字体没有，会显示第二种字体
font-size	设置字体大小。注意：body改完大小标题大小不会随之改变，需要单独设置
font-weight	可以是标签文字加粗<strong>
font-style	设置斜体，同<em></em>

字体复合属性

复合写法有格式要求：

.class{

font: font-style font-weight font-size/line-height font-family;

} 不可换顺序！

font-size和font-family必须保留

CSS文本属性

文本颜色、对齐文本、装饰文本、文本缩进、行间距等。

文本属性
属性	表示	注意点
color	文本颜色	选择颜色
text-align	文本对齐	文字水平对齐方式
text-indent	文本缩进	通常首段空两字
text-decoration	文本修饰	添加下划线 underline 取消下划线 none
text-height	行高	控制行与行间距离

对齐文本

div {

text-align:center;/*对齐方式*/

}

对齐文本
属性值	解释
left	左对齐（默认）
right	右对齐
center	居中对齐

装饰文本

div{

text-decoration：underline;

}

装饰文本
属性值	描述
none	默认；没有装饰线
underline	下划线
overline	上划线
line-through	删除线

可以改变链接默认的一些特性，如蓝色，下划线。

文本缩进

如每个自然段空两行。

div{

text-indent:10px;

}

正数向右缩进，负数则向左缩进（可以做到看不见打头的文字）

单位em是相对单位，相对当前元素一个文字的大小。

行间距

div{

line-height:26px;

}

行间距包括=上间距+下间距+文本高度；

改变的是上下间距；

像素足够小可以达到重合效果；

CSS引入方式

外部样式表，单独写在CSS文件中，之后引入到HTML页面中。

用<link>连接。

报道案例

html代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面</title>
    <link rel="stylesheet" href="jwzx.css">
</head>

<body>

    <h1>同志生存现状</h1>
    <div class="div">2024-01-13 <a href="http://www.time-weekly.com" target="_parent">《时代周刊》</a></div>
    <hr>
    <p>2004年，卫生统计中国同性恋人数约500~1000万。同年著名专家张北川教授估计，女同性恋人数也在1000万左右。</p>

    <p>2006年，中国疾控中心公布统计中国男同性恋约2000万人。</p>

    <p>2014年，根据科学研究院的平均统计，中国的同性恋人数可达7000万，也就是说，比例在5.38%左右。</p>

    <p>后来国内普遍估计同性恋占全国人口比例应该3%~5%左右，即是13亿人里有3900到6500万的同性恋。
        但其他国家英国的调查同性恋比例高达5%~7%，加拿大的一个调查中则只有1%的人承认自己是同性恋，不同机构数据不尽一致，所以以上数据都仅是预估。准确度可能比你自己猜公司里有几个同性恋还低。</p>

    <p id="img"><img src="https://www.keaitupian.cn/cjpic/frombd/2/253/811457764/3706655221.jpg"> </p>

    <p>人数最多的是北上深广，终于又看到一项深圳超越广州的实力证据了，被誉为gay都的成都用户人数和广州几乎差不多。</p>

    <h3>中国不同城市的同志身材比例是怎样？</h3>


    <p>用户年龄最多的是24岁有62879人，24岁左右年龄应该是使用社交软件最频繁的年龄段，工作不久的年轻鲜肉有充足的精力在软件上期待遇到一段感情，或者寻找其他的刺激。使用统计直方图如图展示了813349位用户的年龄从15-60年龄段的分布情况，基本符合正态分布。用户量最多的身高为170和175
        cm，最多的体重为65、60和70 kg。
        某同志app的北京、上海、广州、深圳、成都、重庆、杭州等29个中国主要省会城市用户的体型主要呈现正常，随着年龄的增大，其超重的情况越来越多。</p>



    <p>BMI指数（即身体质量指数，简称体质指数又称体重，英文为Body Mass Index，简称BMI），身高体重指数这个概念，是由19世纪中期的比利时通才凯特勒最先提出。它的定义如下：</p>



    <div class="BMI">体质指数（BMI）=体重（kg）÷身高^2（m）</div>



           <p> 例如：70kg÷（1.75×1.75）=22.86, 一个人的身高为1.75米,体重为68千克，他的BMI=68/(1.75^2)=22.2（千克/米^2）当BMI指数为18.5～23.9时属正常。</p>

            <h3>中国同志里1/0比例是多少？</h3>


            <p>某同志社交软件的用户包括4种类型：1（攻 top），0（受
                bottom），0.5(攻受皆可，vers)，-1(属性未标注或不认可01)。某同志app的北京、上海、广州、深圳、成都、重庆、杭州等29个中国主要省会城市中-1(属性未知)的用户总数最多，其次是属性为1的用户，用户最少的属性为0。并非大家常说的“0多1少“，但是也不排除属性未明的用户其实是0多1少。

                由于大家普遍认为：0.5和-1都是0，为了证明这种言论纯属扯蛋！某位知乎朋友（知乎ID：平均水平的gay）专门针对该同志社交app上400个属性为0.5和-1的用户做了相关的问卷调查，结果如下图所示，其中10%的0.5认为自己偏1和30%的-1认为自己偏1。
            </p>



            <p>根据问卷调查结果，对数据中属性为0.5和-1的用户作二次处理分配，得到的用户属性分布情况如下：


                确实是0多1少，但是两者比例几乎一致，0：1的比例为1：0.97，这意味这1个属性为"0"的用户对应0.97个
                属性为"1"的用户。根本没有网友说得那么夸张。现实社会中，0往往比1在网络社会中更活跃，所以更多的言论都来自属性为0的用户。
                某同志app的北京、上海、广州、深圳、成都、重庆、杭州等29个中国主要省会城市中北京市用户最多，其总数约为100440人。不同城市的不同属性用户的分布情况如下：
                再给你们看一个数据，每个城市的1/0比例数据：郑州的1/0比例数值最大，这意味着1个属性为“0”的用户对应1.11个属性为"1"用户，属性为-1和0.5的用户不予考虑。这些城市的1/0比例基本在1.0左右波动。
            </p>
            <div class="div2">本文来源：ShiningStar. (2020a). 中国32个城市同性恋群体生存现状——男同篇. [online]<a href="//www.time-weekly.com/">《时代周刊》</div>
</body>

</html>

CSS代码：

body {
    font: 16px '微软雅黑';
    line-height: 25px;
}

h1 {
    font-weight: 400;
    text-align: center;
}
.BMI {
    text-decoration: underline;
    text-align: center;
    font-weight: 800;
}
#img {
    text-align: center;
    text-indent: 0%;
}
p {
    text-indent: 2em;
}
.div{
    text-align: center;
}
.div2 {
    color: rgb(133, 135, 137);
    font-size: 15px;
}

效果：