黑马CSS

m0_73818810

已于 2022-12-18 23:44:11 修改

阅读量165

点赞数

文章标签： css 前端 javascript

于 2022-12-18 01:31:50 首次发布

本文链接：https://blog.csdn.net/m0_73818810/article/details/128359208

版权

CSS

基础

1.引入

选择器 {}
引入方式

（小案例）内嵌式写在style标签中

（项目）外联式写在单独的.css文件中

 <link rel="stylesheet" href="./my.css">

（配合js使用）行内式写在标签的style属性中

 <div style="color: ;">hh</div>

2.选择器

标签选择器

以标签名命名的选择器

选中所有的标签都生效

 <style>
        p{
            color: red;
        }
    </style>
</head>
<body>
    <p>这是p标签</p>

类选择器

定义和使用才能生效

类名由数字字母下划线中划线组成，不能以

数字和中划线开头。

<style>
        .yanse{
            color: red;
        }
    </style>
</head>
<body>
    <p class="yanse">这是p标签</p>
</body>

id选择器

配合js使用

一个id只能用一次

 <style>
        #blue{
            color: skyblue;
        }
    </style>
</head>
<body>
    <p id="blue">这是p标签</p>
</body>

通配符选择器

选择所有标签

<style>
        *{
            color: red;
        }
    </style>
</head>
<body>
    <p>这是p标签</p>
    <p>这是h标签</p>
    <p>这是q标签</p>
</body>

3.字体和文本样式

文字

默认字号16

字号注意加字号

字号：font-size

粗细：normal400

bold700

倾斜：font-style: italic;

font-style: normal;//不倾斜

字体：font-family: 字体;

可以化简：font: style weight size family （复合属性）不能省略字号和字体（只能省前两个）

<style>
        p{
            font-size: 30px;
            font-weight: 100;
            font-style: italic;
            font-family: 楷体;
            //font: italic 700 66px 宋体;
        }
    </style>
</head>
<body>
    <p>这是p标签</p>
</body>

css是层叠样式表

写在后面的覆盖前面的

文本缩进： text-indent: 10em;(一般用em代表一个字符可以不用管字号大小)

文本水平对齐方式：text-align: center;（left，right）（文本，span，a，input，img标签都可以实现 (图片在body中！)。

文本

文本修饰：text-decoration: underline;下划线

text-decoration: line-through;删除线

text-decoration: overline;上划线

text-decoration: none;无装修线

<style>
        p{
           text-indent: 10em;
           text-align: center;
        }
        body{
            text-align: center;
        }
        a{
            text-decoration: underline;
            text-decoration: line-through;
            text-decoration: overline;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <p>最新的web前端html5+css3+前端项目重磅上线啦！
        采用实战式教学，一线大厂的综合案例，用最短的路径讲解每个技术点，每章节都自成闭环。
        课程中和课程尾配备两个实战项目，项目一类型是企业站，快速的将基础知识点进行反复练习；项目二类型是电商站，基于项目一升级难度，掌握更复杂的网页效果的开发流程和布局标准。严格按照专</p>
        <img src="pp/捕获.PNG" alt="">
        <a href=#>"点呀！！！"</a>
</body>

行高：line-height: 100px;(注意单位)

or line-height: 1.5;(字号的倍数)

也可以 font: style weight size**/line-height** family

在这里插入图片描述

```

最新的web前端html5+css3+前端项目重磅上线啦！采用实战式教学，一线大厂的综合案例，用最短的路径讲解每个技术点，每章节都自成闭环。课程中和课程尾配备两个实战项目，项目一类型是企业站，快速的将基础知识点进行反复练习；项目二类型是电商站，基于项目一升级难度，掌握更复杂的网页效果的开发流程和布局标准。严格按照专

```

4.谷歌调试工具

f12或检查

5.拓展

颜色取值

<style>
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div>

    </div>

div由于网页布局，如果用div尽量使用类名控制样式

2.进阶

1.选择器

后代选择器：选择器1 选择器2 {}(所有级别后代)
子代选择器：选择器1>选择器2 {}(只选下以及)
并集选择器：选择器1，

选择器2，

选择器n {}

交集选择器：

<style>
        p.box{
            color: red;
        }
    </style>
</head>
<body>
    <p class="box">ppp</p>
    <div>div</div>
    <span class="box">span</span>
    <h1>h1</h1>

    <h2>h2</h2>
</body>

hover伪类选择器（鼠标悬停在元素中的状态）

<style>
        a:hover{
            color:red;
        }
    </style>
</head>
<body>
    <a href="#">lianj</a>
</body>

Emmet语法

2.背景

默认透明
背景图片：background-image: url(pp/捕获.PNG);
背景平铺：background-repeat
背景位置：background-position: center center;

在这里插入图片描述

背景属性连写

background: color image repeat position

这几个不分顺序（英文没影响。数字有顺序要求）

背景相关属性

img实现比较重要的

其他用背景

3.显示模式

块级：独占一行，可以设置宽高，宽带默认父元素宽度，高度默认由内容撑开

eg：div，p，h
行内元素

一行显示多个，宽度和高度默认内容撑开，不可以设置宽高

eg：a，span
行内块

一行显示多个，可以设置宽高

eg：input，textarea
转换

在这里插入图片描述

标签嵌套

4.css特性

继承性

子元素继承父元素特点

文字控制属性都可以继承

a中的color会继承失效

h中的font-size会继承失效

层叠性

3.盒子模型

叠加计算

在这里插入图片描述

如果都是继承，看继承那个父级高，那个生效

PxCook
盒子模型
1. 边框border

/* 边框 solid实线 dashed 虚线 dotted点线//线的方向-left */
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            border-right: 1px solid #000;
        }

boder padding会撑大盒子的尺寸（两侧边框）

2. 在这里插入图片描述

内边距padding:10px,20px,40px,80px

最多取4 个值上下左右

三个值上左右下

两给值上下左右
1. 自动内减
  
  box-sizing: border-box
  
  不会成大
2. 外边距margin
3. 清除默认边距
  
  margin 和padding：0；
4. 版心居中
  
  margin：0 auto；
5. 一些问题