CSS1day_html-js-css_内存溢出

文章目录 CSS选择器基础选择器类选择器id选择器通配符选择器CSS字体属性字体系列（font-family）字体大小（font-size）字体粗细（font-weight）文字样式（font-style）CSS字体的复合属性：CSS文本属性1.文本颜色(color)2.对齐文本(text-align)3.装饰文本(text-decoration)3.文本缩进(text-indent)4.行间距(line-height)CSS的三种样式表1.行内样式表(行内式)2.内部样式表(嵌入式)3.外部样式表(链接式)

CSS选择器

基础选择器和复合选择器两个大类：

基础选择器由单个选择器组成的包括：标签、类、id和通配符选择器基础选择器

标签选择器：
为页面中某一类标签指定统一的CSS样式。
例如将和

的所有标签选择出来进行设置样式。
显然这类标签的缺点是不能进行差异化样式。
例如：

p {
font-size: large;
color: deeppink;
}

类选择器

差异化选择不同标签进行设置CSS样式。
需要在标签中定义class属性，对应class属性值设置。
类选择器记忆：样式点定义结构类（class）调用一个或多个开发最常用
例如：

.red {
color : red ;
}

    <style>
        .red {
            width: 100px;
            height: 100px;
            /* 背景颜色 */
            background-color: red;
            color: rgb(249, 244, 244);
        }
        .green {
            background-color: green;
            width: 100px;
            height: 100px;
        }
    style>
head>

<body>
    <div class="red" >asdasddiv>
    <div class="green">sdsdasdiv>
    <div class="red">asdassdiv>

注意上面这个示例:
color设置的是文本的颜色，background-color才是设置三个div盒子的颜色！！

类选择器多类名：

在标签class属性中写多个类名多个类名中间必须用空格分开这个标签可以分别具有这些类名的样式

    <style>
        .red {
            /* 背景颜色 */
            background-color: red;
            color: rgb(249, 244, 244);
        }
        .green {
            background-color: green;
        }
        .box {        
            width: 100px;
            height: 100px;
        }
    style>
head>

<body>
    <div class="red box" >asdasddiv>
    <div class="green box">sdsdasdiv>
    <div class="red box">asdassdiv>

增加box类，但是页面结果和上一个示例相同。

多类名选择器在后期布局复杂的情况下，使用频繁

id选择器类选择器(class)好比人的名字，人跟名字是多对多的关系，类选择器可以多次被调用。id选择器好比人的身份z号码，全国唯一（id的唯一性）id选择器一般用户唯一性的元素中，只能调用一次，经常和javascript搭配使用。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        #green {
            color: green;
        }
    style>
head>

<body>
    <div id="green">找个朋友div>
body>

通配符选择器选择所有的标签特殊情况使用

    <style>
        * {
            color: green;
        }
    </style>

CSS字体属性

#font {
    font-family: 'kaiti','Microsoft Yahei';
    font-size: 100px;
}

字体系列（font-family）各种字体之间用逗号隔开'Microsoft Yahei’这种有空格隔开的多单词字体，加引号尽量使用系统默认自带的字体，保证在任何浏览器都能正确显示最常见的几个字体：body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; } 字体大小（font-size） px是网页中最常用的单位谷歌浏览器默认文字大小为16px不同浏览器可能默认显示的字号不一样，尽量给出一个明确的大小，不要取默认值可以给body指定整个页面文字的大小字体粗细（font-weight） bold（700）表示加粗， normal（400）表示默认值（当然还有其他形式）可以用数字表示粗细（注意不要加px这样的单位）学会让加粗标签不加粗（如 h2和strong),用id选择器给他们一个font-weight=100即可。文字样式（font-style）

<style>
    h2 {
       font-family: 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 
    }
    #font {
        font-family: 'kaiti','Microsoft';
        font-style: normal;   
        font-size: 100px;
        font-weight: 800;
    }

style>

<body >
    <em id="font">我是什么字体em>
    <p >
        我是楷体
    p>
body>

如上图示例，让倾斜的标签变的不倾斜。normal:标准的字体样式，italic:斜体的字体样式。 CSS字体的复合属性：
body { font: font-style font-weight font-size/line-height font-family; /* 字体样式(如斜体) 字体粗细字体大小/行高字体系列(微软雅黑)*/ }
font-size/line-height font-family属性不能省略，这两项必须在font中，其他没填则是默认值。使用font属性时，不能更换顺序，注意空格复合属性感觉就是为了减少代码行数的一个功能
<style> body { font: normal 800 16px 'kaiti'; /* 字体样式(如斜体) 字体粗细字体大小字体系列(微软雅黑)*/ } style> <body > <em>我是什么字体em> <p > 我是楷体 p> body>

结果：

em应该是把body的样式覆盖了。
CSS文本属性 1.文本颜色(color)
color属性定义文本颜色(预定义的颜色值red;rgb(255,0,0);十六进制#FF0000三种方式)

#green { color: green; }
2.对齐文本(text-align)
text-align属性用于设置元素内文本内容的水平对齐方式，

div { /* 本质是让div盒子里面的文字水平居中对齐 */ text-align: center/left(默认左对齐)/right; }
3.装饰文本(text-decoration)
text-decoration属性规定添加到文本的修饰。可以给文本添加下划线，删除线，上划线等。

div { /* 本质是让div盒子里面的文字水平居中对齐 */ text-decoration: underline; }

属性值描述
none 默认。没有装饰线（最常用）
underline 下划线。链接a自带下划线（常用）
overline 上划线。（几乎不用）
line-through 删除线。（不常用）

.xia_hua { text-decoration: line-through; text-decoration: overline; }

含这种类选择器的标签会显示上划线，删除线不显示。好像叫层叠性？
主要掌握添加下划线，删除下划线，其余了解即可。 3.文本缩进(text-indent)
text-indent属性用来指定文本的首行缩进，通常是将段落的首行缩进。

div { /* 缩进10个像素 */ text-indent: 10px; }

小tips:像素可以取负值。（试试）

p{ /* 缩进当前元素2个文字大小的距离*/ text-indent: 2em; }

em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。
4.行间距(line-height)
line-height属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离。

div { /* 缩进10个像素 */ line-indent: 26px; }

如上图所示：缩进26px时，如果文本高度是16px,上间距和下间距各占5px。
CSS的三种样式表 1.行内样式表(行内式) 在元素标签内部的style属性中设定CSS样式。适用于修改简单样式。没有体现结构与样式相分离的思想，不推荐使用。下面是行内式引入的示例

行内样式表

2.内部样式表(嵌入式) 写到html页面内部，是将所有的CSS代码放在style标签中上文的例子都是内部样式表，理论上把

属性值	描述
none	默认。没有装饰线（最常用）
underline	下划线。链接a自带下划线（常用）
overline	上划线。（几乎不用）
line-through	删除线。（不常用）