前端DAY 3笔记

最新推荐文章于 2024-05-20 11:40:56 发布

「已注销」

最新推荐文章于 2024-05-20 11:40:56 发布

阅读量199

点赞数

文章标签：前端 html

本文链接：https://blog.csdn.net/lang156/article/details/126807831

版权

CSS

1.选择器（选择HTML中的标签）修改内容用{例如 color: red;front-size: 45px;px为像素即字的大小}

2.CSS一般在<head></head>中进行样式的修改。一般以<style>开始，以</style>结束。

<style>
        /* 给谁去修改样式，谁指的是HTML中的各种标签 */
        p {color: aqua;
            font-size: 58px;}
        /* 以{开始，以}结尾 */
        /* 容易出现一种错误就是，这个标签在body中并没有，导致修改的参数无法在网页中体现 */
    </style>

3. CSS代码规范，样式修改参数之间分段enter。选择器后一空格，：之后一空格。

4.选择器的分类：

（1）标签选择器：最基础所有的样式一起改变，比如选择<p></p>把所有段落都修改

<style>
        /* 给谁去修改样式，谁指的是HTML中的各种标签 */
        p {color:aqua;
            font-size:58px;}
        /* 以{开始，以}结尾 */
        /* 容易出现一种错误就是，这个标签在body中并没有，导致修改的参数无法在网页中体现 */
    </style>

（2）类选择器（class）

样式点(.)定义，结构类（class）调用，一个或多个，运用最广泛。

.后定义是我们自己起的名字，不一定非要英文，只要保证定义和调用同一即可，但是不能用标签名如p,div。

class可以调用多个类，用空格隔开。

<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>Document</title>
    <style>
       .red {
        color: pink;
       }
       .green {
        color: green;
       }
    </style>
</head>
<body>
    <p class="red">one</p>
    <p class="green">one</p>
    <p class="red">one</p>
    <p class="red">one</p>
    <p class="red">one</p>
    <p class="green">one</p>
    <p class="red">one</p>
    <p class="red">one</p>
    <p class="red">one</p>
    <p class="red">one</p>
    <p class="red">one</p>

</body>

（3）id选择器：

样式＃定义，结构id调用，只能调用一次，别人切勿使用。（个人在VS上测试是可以两次调用，可能巧合）

<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>Document</title>
    <style>
       #pink {
        color:pink;
       }
    </style>
</head>
<body>
    <div id="pink">one</div>
    <div id="pink">two</div>
    

</body>

（4）通配符选择器（全选）：

把页面内所有标签的东西全部改成相应参数，哪怕是<html>,<body>也改只不过无法看出罢了。还有就是无需调用。

<style>
    *{
    margin：0;
    padding：0;
}
把所有的页边距改为0；
</style>

5.修改字体,仍在<style>里修改，多个字体用英文逗号隔开，遇到两个单词需用单引号括起来。

<style>

body {font-family:'Miicrosoft YaHei',tohoma,arial,'Hiragino Sans GB';}

</style>

6.修改字的大小

{font-size：xxpx;} px为像素即字的大小，如果<style>里body设置了font-size管不到比哦阿嚏，需另行设置。

7.修改字的粗细 font-weight, 400等价于normal,用于实际开发中标题去加粗 ,700等价于bold,用于实际开发中标题加粗 .

    <style>
        XI {
            font-style:400;
            /* 400等价于normal,用于实际开发中标题去加粗 */
        }
        CU {
            font-style:700;
            /* 700等价于bold,用于实际开发中标题加粗 */
        }
    </style>

font-weight:后的数字不加px;

8.修改字的倾斜程度,倾斜 font-style:italic;把倾斜改正常 font-style:normal;
实际开发把倾斜<em>改正常居多

    <style>
        QX{
            font-style:italic;
        }
        BQX{
            font-style:normal;
        }
        /* 倾斜 font-style:italic;把倾斜改正常 font-style:normal;
        实际开发把倾斜<em>改正常居多 */
    </style>

9.font简写(style,weight,size,family)，其他可以省，size,family必须写；weight不加px,size要加px

<style>
        body{
            font: font-style(倾斜程度) font-weight(字体粗细) font-size (字体大小) font-family(字体样式) 
        }
        /* 其他可以省，size,fanily必须写；weight不加px,size要加px */
        body {
            font: normal 700 16px 'Microsoft YaHei';
        }

    </style>

文本属性

10.字体颜色（十六进制，便捷，最常用）：先输入color:#ff000f;然后鼠标双击#ff000f，选中之后光标放在#ff000f上，一两秒后会出现一个选色板，然后拖动选择你心仪的颜色。

字体颜色（rgb,red,green,blue）：类似三原色的合成，第一个数值为红色，第二个绿色，第三个为蓝色，输入rgb(255,0,0)，然后双击rgb(255,0,0)，选中后，光标放在选中区域，一两秒后出现选色板，然后选择心仪的颜色。

11.文字对齐：text-align:center,left,right;将盒子内的内容居中，左，右对齐；

12.文字装饰：text-decoration: none去除下划线（去除链接下划线），underline添加下划线，这两个最常用。line-through添加删除线，overline添加上划线。

13.文本缩进（一段文字的首行缩进）：text-indent : 后面加绝对单位px，表示缩进多少的单位，或者相对单位em,1em为当前文字的大小，会根据文字的样式进行改变.比较方便便捷。

14.设置行间距（行高）：line-height: xx px;一般文字为16px,文字本身高度加上上，下间距构成了行间距，因此行高设置越高，上，下间距越大，从而显示出行与行之间的差别。

15.内部样式表（一个页面）：以<style></style>放入<head></head>之中，从而实现样式与结构相分离。

16.行内样式表(一个标签)：直接在需要修改的标签内，定义相应的样式。<p style="color: ;font-size: ;"></p>,适合修改简单的样式。

17.外部样式表（多个页面，使用最多）：通过新建一个.css文件，这里面无需使用<style>,只需要写修改的样式的代码。然后通过在原html文件中的<head>中引入，link＋tab,注意如果使用了内部样式，不能写在内部样式的<style></style>内。<link rel="stylesheet" href="相对链接">(全写出来的状况)