CSS入门教程

最新推荐文章于 2024-07-10 10:14:49 发布

大润发第一渔夫

最新推荐文章于 2024-07-10 10:14:49 发布

阅读量425

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_69401634/article/details/125949921

版权

文章目录

一.CSS基础语法
二.CSS语法的引入方法
三.背景样式
四.边框样式
五.文字样式
六.段落样式
七.CSS复合样式
八.CSS选择器
九.CSS样式继承
十.优先级

一.CSS基础语法

格式:选择器{属性1:值1;属性2:值2}
常用属性:
- width:宽度单位:1.px—>像素 2.%—>相对外容器百分比
- height:高度
- background-color:背景颜色
  - 三种表示方法:单词,十六进制,RGB三原色
  - 透明色:transparent

二.CSS语法的引入方法

内联样式---->style属性

<div style="background-color: red">这是一个块</div>

内部样式---->style标签

<style>
    div{background-color: red;}
</style>

外部样式---->引入外部文件

标签

<link rel="stylesheet" href="1.css">/*rel:外部资源与代码关系 href:外部资源路径*/

@import(不建议使用)

三.背景样式

background-color: red;  /*背景颜色*/
background-image: url(图片路径);  /*背景图片*/
background-repeat: ;  /*背景平铺方式 1.repeat-x:x方向平铺 2.repeat-y:y方向平铺 3.no-repeat:不平铺 |默认水平垂直都平铺满背景图*/
background-position: ;  /*背景图位置 三种方式 1.像素 2.百分比 3.单词 | 默认在左上角*/
background-attachment: ;  /*背景图随滚动条的移动方式  两种方式 1.scroll:相对浏览器固定位置 2.fixed:相对屏幕固定位置 |默认方式1*/

四.边框样式

     ```html

border-style: dashed;/* 边框样式 dashed:虚线 soled:实线 dotted:点线 /
border-color: red;/ 边框颜色 /
border-width: 5px;/ 边框大小 /
border-right-color: green;/ 运行设置单独一边框 */
```

五.文字样式

 font-family: 宋体,仿宋,'Times New Roman';/* 设置字体 1.逗号隔开则按顺序依次识别 2.字体为多单词组成要加单引号 */

 font-size: 20;/* 字体大小 默认16像素 写法:1.像素值 2.单词 */

 font-weight: bold;/* 字体粗细 写法:1.数值(100-500正常,600-900加粗) 2.单词:normal(正常) bold(加粗) */

 font-style: italic;/* 字体样式 italic(斜体) normal(正常)*/

 color: blue;/* 字体颜色 */

六.段落样式

 text-decoration: line-through overline underline ;/* 文本装饰  line-through:删除线 overline:上划线

 underline:下划线 none:无装饰 | 可以同时使用*/

 text-transform:lowercase uppercase capitalize ;/* 大小写(针对英文段落) lowercase:小写 uppercase:大写 capitalize:首字母大写*/

 text-indent: 2em;/* 文本首行缩进 一个em单位=一个字体大小 */

 text-align: justify;/* 文本对齐方式  justify:两端对齐*/

 line-height: 3em;/* 定义行高 */

 letter-spacing: normal;/* 字间距 */

 word-spacing: normal;/* 词间距(只针对英文) */

 word-wrap: break-word;/* 不那么强烈的折行 */

 word-break: break-all;/* 强烈折行 */

七.CSS复合样式

一个CSS属性只控制一种样式,叫做单一样式

一个CSS属性控制多种样式,叫做复合样式

最好不用混用,若一定要用,则应该先写复合再写单一

/* 复合样式,通过空格实现|有的不用关心顺序,如background和border,有的需要按顺序,如font */
background: red url() no-repeat 0 0;

font: 100 bold 32px 宋体;/* font顺序:size和family一定要有,且在最后 */

八.CSS选择器

1.ID选择器

<style>
    #div1{background-color: red;}/*一个id和一个#一一对应,不可复用*/
</style>
<div id="div1">
    这是一个块
</div>

2.CLASS选择器

<style>
    div.box{background-color: blue;}/*标签.类名,此写法表示只对此标签生效,不写标签则对所有标签生效*/
    
    div.content{font-family: 宋体;background-color: red;}/*使用多个样式时,后面写的覆盖前面,*/
</style>
<div class="box content"><!--可以添加多个class样式,此处顺序不决定样式加载顺序-->
    这是一个块
</div>
<div class="box content"><!--类选择器可以复用-->
    这又是一个块
</div>

3.标签选择器

<style>
    div{background-color: blue;}/*所有div标签都生效*/
</style>
<div class="box content">
    这是一个块
</div>

4.群组选择器

    <style>
        div,.box,#h-2{background-color: blue;}/*通过逗号隔开,同时写多种选择器*/
    </style>
    <div class="box content">
        这是一个块
    </div>
    <p class="box">这是一个段落</p>
    <h2 id="h-2">这是一个标题</h2>

5.通配选择器

    <style>
        *{background-color: red;}/*通配选择器,对所有标签都生效*/
    </style>
    <div class="box content">
        这是一个块
    </div>
    <p class="box">这是一个段落</p>
    <h2 id="h-2">这是一个标题</h2>

6.层次选择器

后代—> M N{}:M标签内所有N标签生效

父子—>M>N{}:M标签内下一级的N标签生效

兄弟—>M~N{}:M标签下方的所有兄弟N标签生效

相邻—>M+N{}:M标签下方一行的N标签生效

7.属性选择器

<style>
    div[class][id="h-2"]{background-color: red;}/* div标签中同时有class属性和id属性为"h-2"的才生效 */
    h[class*="box"]{background-color: blue;}/* *=部分匹配 ^=起始匹配 $=结束匹配 */
</style>
<div class="box content">
    这是一个块
</div>
<p class="box">这是一个段落</p>
<h2 id="h-2">这是一个标题</h2>

8.伪类选择器

:link—>访问前样式|只能给a标签添加

:visited—>访问后样式|只能给a标签添加

:hover—>鼠标移入后样式

:active—>鼠标点击后样式

::after—>在div内容后添加文本

::before—>在div内容前添加文本

:focus—>选中文本框后生效

:checked—>勾选复选框后生效

:disabled—>不可选的复选框生效

<style>
        a:link{background-color: red;}
        a:visited{background-color: green;}
        a:hover{background-color: blue;}
        a:active{background-color: yellow;}
        div::after{content: "word";}/* 在div内容后添加文本 */
        div::before{content: "Hello ";}/* 在div内容前添加文本 */
        :focus{background-color: red;}/* 选中文本框后生效 */
        :checked{width: 50px;height: 50px;}/* 勾选复选框后生效 */
        :disabled{width: 50px;height: 50px;}/* 不可选的复选框生效 */
</style>
<body>
    <div>CSS </div>
    <a href="#">链接</a>
    <input type="text">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox" disabled>
</body>

9.结构伪类选择器

:nth-of-type()—>第a个生效,若a为字母n,则全部生效

:first-of-type—>第一个生效

:last-of-type—>最后一个生效

:only-of-type—>唯一一个生效

:nth-child()—>第a个生效,若a为字母n,则全部生效

:first-child—>第一个生效

:last-child—>最后一个生效

:only-child—>唯一一个生效

    <style>
        div:nth-of-type(1){background-color: red;}/* 第1个div标签起作用 */
        div:nth-child(3){background-color: blue;}/* 第2个标签如果为div才起作用 */
        /* 区别: M:nth-of-type会先进行筛选出M,再生效 M:nth-child不会筛选,若目标不是M标签,则无效*/
    </style>
<body>
    <div>第1块</div>
    <h2>第1个标题</h2>
    <div>第2块</div>
</body>

九.CSS样式继承

文字相关的样式可以被继承

布局相关的样式不能被继承(但是可以设置继承属性inherit)

<style>
    div{
        width: 500px;
        height: 500px;
        background-color: red;
        color: blue;
        font-size: 250;
    }
    p{
        border: inherit;/*设置p标签可以继承border属性*/
    }
</style>
<div>
    <p><!--此p标签会继承div标签的部分样式-->
        这是一个段落
    </p>
</div>

十.优先级

相同样式和内外部样式,后面出现的优先级高

越特异,优先级越高

单一样式:行间>id>class>tag>*>继承

在选择器中可以加上!important; 可以提升优先级

群组选择器与单一选择器优先级相同,优先显示后写的

层次优先级:

1.权重比较:

ul li .box p input {} 1+1+10+1+1

.hello span #elem{} 10+1+100

2.约分比较:

ul li ~~.box~~ p ~~input~~ {} —>ul li p

~~.hello~~ ~~span~~ #elem{} —>#elem