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>
复制代码

 

伪类选择器

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

（1）链接伪类选择器

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

复制代码
<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>
复制代码

 以下是链接伪类选择器的简写方式【最常用写法】

复制代码
<head>
        <style>
            a {
                /* a是标签选择器，指所有的链接 */
                color: cornflowerblue;
                font-size: 20px;
                font-weight: 700;
            }
            a:hover {
                /* ：hover是链接伪类选择器 */
                color: tomato;    /* 鼠标经过，由蓝色变红色 */
            }

        </style>
    </head>
    <body>
        <div>
            <a href="#">零元购</a>
        </div>
    </body>
复制代码

 

（2）结构伪类选择器

 

 

 

 

 

复制代码
<head>
        <style>
            li:first-child {   /* 第一个孩子 */
                color: orangered;
            }
            li:last-child {    /* 最后一个孩子 */
                color: green;
            }
            li:nth-child(3) {  /* 第三个孩子，括号写几就是第几个孩子 */
                color: mediumpurple;
            }
        </style>
    </head>
    <body>
        <ul type="square">
            <li>长虹剑</li>
            <li>冰魄剑</li>
            <li>紫云剑</li>
            <li>奔雷剑</li>
            <li>青光剑</li>
            <li>雨花剑</li>
            <li>旋风剑</li>
        </ul>
    </body>
复制代码

 

其他用法

复制代码
li:nth-child(even) {/* 可以选择所有偶数（even）孩子标签 */
                color: orange;
            }
li:nth-child(odd) {/* 可以选择所有奇数（odd）孩子标签 */
                color: skyblue;
            }
li:nth-child(n) {
                color: aqua;/* 选择全部孩子 ，里边还可以写2n，3n等等*/
            }
复制代码

 

 (3)目标伪类选择器

target目标伪类选择器：选择器可用于选取当前活动的目标元素

:target {
        color: red;
}

 

三、CSS外观属性

颜色属性

line-height:行间距

用于设置行间距，也称行高。一般比字号大7，8个像素，即px。

p {
    line-height: 40px;
}

 

text-align: 水平对齐方式

center：居中

left：左对齐

righ：右对齐

text-indent：首行缩进

所有段落都会缩进，建议使用em，作为单位，1em=一个字的宽度

p {
    text-indent: 2em;/* 此时2em就是两个字的宽度 */
  }

 

letter-spacing：字间距

字符之间的空白，允许使用负数，默认为normal

div {
    letter-spacing: 2px;
}

 

word-spacing：单词间距

对中文无效

颜色半透明（CSS3新增）

color:rgba(r,g,b,a)，a指alpha，即透明度，取值在[0,1]之间，参数不能省略

div {
    color: rgb(0,200,173,0.5);
}/*测试下来rgb和rgba效果一样，不知道是不是兼容度提高了，为了规范依然使用rgba*/

 

文字阴影（CSS3）

text-shadow：水平位置，垂直位置，模糊距离，阴影颜色；【共计四个参数】前两个参数必写，最后两个可以省略

h1{
    text-shadow: 1px 2px 4px rgba(183,23,48,0.5);
    /* 参数之间用“空格”隔开，而不是逗号
    前两个参数必须有，后两个可以省略 */
}

 Hbuilder快捷方式

div*10快速生成10个标签
ul>li快速生成父子类标签
div+p快速生成兄弟标签，同一级的标签
.red+tab键快速生成带类名的div
#red+tab快速生成带id名的div
例：.nav+.header+.main>.left+.right







posted @   昨夜寒潭梦落花  阅读(95)  评论(0)  编辑  收藏  举报
相关博文：
· 1-CSS
· CSS学习笔记——基础选择器，字体属性，文本属性，三种样式表
· CSS：字体属性，基础选择器
· CSS基础
· 02【CSS简介、基础选择器、字体属性、文本属性、引入方式】
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛