pink老师＿黑马程序员＿CSS基础学习笔记

关于CSS具体属性此处不一一列举，提供CSS参考手册网址供参考

一、CSS字体样式属性

font-size：字号

相对长度单位	说明
em	相当于当前对象内文本的字体尺寸
px	像素【最常用，推荐使用】
绝对长度单位	说明
in	英寸
cm	厘米
mm	毫米
pt	点

font-family：字体样式

p {
　　font-family: "宋体"；／＊可以写多个字体，用英文逗号隔开，表示找不到１字体去找２字体，等等＊／
　　font-size: 14px;／＊ctrl＋／是注释快捷键＊／
　　color: pink;
}

CSS　Unicode字体

在CSS中设置字体名称可以直接写中文，但是在文字编码（GB2312 UTF-8等）不匹配时会产生乱码的错误，ｘｐ系统不支持类似微软雅黑的中文。

解决方案一：使用英文代替。font-family：“Microsoft　Yahei”；

解决方案二：在CSS中直接使用Unicode编码字体

【建议:Unicode字体只用“宋体”和“微软雅黑”】

font-weight：字体粗细

除了HTML中的的＜ｂ＞和＜strong＞标签外，还可以使用CSS完成字体加粗效果，但是CSS是没有语义的。

font-wieght属性定义字体的粗细，属性值有normal，bold，bolder，lighter，数字１００～９００

【一般更喜欢用数字表示，数字４００＝normal，数字７００＝bold】

strong{
        font-weight: normal;/* 让标签包裹的粗体不加粗 */
}

font-style：字体风格

除了HTML中的的＜i＞和＜em＞标签外，还可以使用CSS完成字体倾斜效果，但是CSS是没有语义的。

normal：指定文本字体样式为正常的字体

italic：指定文本字体样式为斜体。对于没有设计斜体的特殊字体，如果要使用斜体外观将应用oblique

oblique：指定文本字体样式为倾斜的字体。人为的使文字倾斜，而不是去选取字体中的斜体字【不常用】

em{
　　font-style：normal；／＊让标签包裹的斜体变得不倾斜，　＊／
}

font：综合式样式【重点】

h1 {
    font: italic bold 14px "microsoft yahei";/*前两项可以省略，后两项必须保留，顺序不能改变*/
}

使用Chrome调试

二、选择器【重点】

想要CSS样式应用于特定的HTML元素，首先要拿到这项元素，在CSS中，执行这一任务的样式规则的部分被称为选择器

标签选择器（元素选择器）

标签选择器是指以HTML标签为选择器，按标签分类，为页面中同类型的标签快速统一样式，缺点是不能设计差异化样式

标签{
　　　　属性1:属性值1;
　　　　属性2:属性值2;
}
元素{
　　　　属性1:属性值1;
　　　　属性2:属性值2;
}

类选择器

以元素为对象定义单独或相同样式

<head>
    <style>
    h1 {
        color:palevioletred;
    }
    .yinshi {      /* 加 “.”声明类样式 */
                color: blue;
    }
    .shenle {
                color: orangered;
    }
    .xinba {
            color: gray;
    }
    </style>
</head>
<body>
    <div class="yinshi">银时</div><!-- 此处引用类样式 -->
    <div class="shenle">神乐</div>
    <div class="xinba">新八</div>

CSS命名规范

类选择器命名规范

web前端开发规范手册pdf下载

多类名选择器

给标签添加多个类名，实现多种目的选择

<head>

    <style>

    .c-blue {      /* 加 “.”声明类样式 */
            color: blue;
    }
    .c-orange {
            color: orangered;
    }
    .c-gray {
            color: gray;
    }
    .font20 {
            font-size: 20px;
    }
    </style>
</head>
<body>
    <div class="c-blue font20">银时</div><!-- 此处引用类样式 -->
    <div class="c-orange">神乐</div>
    <div class="c-gray font20">新八</div><!-- 多类名之间用空格隔开 ，此时可以既变颜色又加粗-->
</body>

id选择器

和类选择器结合记忆

#black {
        color: black;
}
<div id="black">土方十四郎</div>
<!--区别于类选择器的“.”开始，id选择器以“#”开头命名，在下方标签处引用-->

类选择器和id选择器的区别

类选择器可以重复多次使用，被多个标签引用，相当于人名

id选择器是唯一的，相当于身份证号，只允许使用一次

通配符选择器【一般用不到，仅作了解】

通配符选择器用“*”表示，是所有选择器中适用范围最广的，能匹配页面中所有元素，基本语法格式如下

* {
    属性1:属性值1;
    属性2:属性值2;
}

<head>
   <style>
       * {   /*星号代表所有选择器*/
        　color: #0000FF;
        　font-size: 20px;
    　　}    
   </style>
</head>
<body>
    <p>银魂</p>
    <div>银魂</div>
    <strong>银魂</strong>
    <i>银魂</i>
    <span>银魂</span><!--这是最近正在重刷银魂的博主-->
</body>

伪类选择器

倾向于给某些选择器添加效果，如给链接添加效果

改变顺序可能造成效果全部无法实现的后果。

<head>
        <style>
            a:link {
                /* 未访问的链接 */
                color: cornflowerblue;
                font-size: 20px;
                font-weight: 700;
            }
            a:visited {
                /* 访问过一次的链接 */
                color: darkorchid;
                font-size: 20px;
                font-weight: 700;
            }
            a:hover {
                /* 鼠标移动到连接上时链接的变化 */
                color: tomato;
                font-size: 20px;
                font-weight: 700;
            }
            a:active {
                /* 选定的链接，我们按住鼠标别松开时的状态 */
                color: green;
                font-size: 20px;
                font-weight: 700;
            }
        </style>
    </head>
    <body>
        <div>
            <a href="#">零元购</a>
        </div>
    </body>

是

从

posted @ 2022-02-23 18:06 昨夜寒潭梦落花阅读(217) 评论(0) 收藏举报

刷新页面返回顶部

pink老师＿黑马程序员＿CSS基础学习笔记

公告