【记录学习过程】2

最新推荐文章于 2024-07-25 22:24:14 发布

小白Jying

最新推荐文章于 2024-07-25 22:24:14 发布

阅读量60

点赞数

文章标签：学习 css html

本文链接：https://blog.csdn.net/SEEKERJY/article/details/128977938

版权

回顾CSS-2023.2.10
##选择器
css语法规范
代码风格
·展开式风格：更直观。
·样式大小写：小写字母
·空格规范：适当位置保留空格，选择器名后、属性冒号后
基础选择器
·标签选择器：针对标签名

<style>
        /*选择器 {样式}*/
        /*给谁改样式 {改什么样式}*/
        p {
            color: red;
            font-size: 12px;
        }
        div {
            color: green;
        }
    </style>
</head>
<body>
    <p>看我是否有样式</p>
    <p>看我是否有样式</p>
    <div>我是div</div>
    <div>我是div</div>
</body>

**·类选择器**：差异化标签-class属性。口诀：样式点定义、结构类（class）调用、一个或多个、开发最常用--from pink老师
		单类名
		多类名：1）class属性中可写多个类名；2）多个类名间必须用空格分开。可提取公共样式，减少空间。

<style>
        /*选择器 {样式}*/
        /*给谁改样式 {改什么样式}*/
        p {
            color: red;
            font-size: 12px;
        }
        div {
            color: green;
        }
        /*类选择器*/
        .red {
            color: red;
            background-color: red;
        }
        .green {
            color: green;
            background-color: green;
            width: 100px;
            height: 100px;
        }
        .box {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="red box">1</div> /*多类名*/
    <div class="green">2</div>
    <div class="red box">3</div>
</body>

·id选择器：口诀：样式#定义，结构id使用，只能调用一次，别人切勿使用！--from pink老师
		一般用于页面唯一性的元素上，经常和JavaScript搭配使用。

<style>
        /*id选择器*/
        #pink {
            color: pink;
        }
    </style>
</head>
<body>
    <div id="pink">你看我是粉红色的吗</div>
</body>

·通配符选择器：* {}， 表示选取页面所有的元素，不需要调用，只有在特殊情况才使用（如清除所有标签的内外边距）。

复合选择器

css字体属性（定义字体、大小、粗细、文字样式）
font-family：定义文本字体。可跟多种字体，用英文逗号隔开
font-size：大小
font-weight：粗细（normal（默认）、bold(粗）、bolder、lighter、number(数字，不带单位))
font-style：文本样式（italic-斜体|normal-不倾斜）
字体复合属性:有顺序要求
css文本属性：
定义文本外观：color-文本的颜色、text-align-对齐文本、text-decoration-装饰文本(none | underline | overline | line-through)、text-indent-文本缩进(1em-定义的大小为此的一个单元大小、line-height-行间距

`/*属性有顺序要求*/
/*font：font-style font-weight font-size/line-height font-family*/
div {
            /* font-style: italic;
            font-weight: 700;
            font-size: 16px;
            font-family: 'Microsoft yahei'; */

            font: inherit 700 16px 'Microsoft yahei';
        }

css 三种样式表
1、行内样式表（行内式）：在元素标签内部的style属性中设定css样式。适用于简单样式。控制当前标签样式。
2、内部样式表（嵌入式）：写到html页面内部。但是将所有的css代码抽取出来，单独放到

使用浏览器调试工具