CSS

CSS全称 “层叠样式表”,主要用于在浏览器中的内容的显示样式,如:大小、颜色、字体加粗等。
使用CSS可以通过定义某一个样式,使不同网页位置上的文字有着统一的样式。

一、CSS选择符声明组成,而声明属性组成。
在这里插入图片描述
选择符:又叫选择器,指明网页要应用样式的对象。
声明:在 { } 内的就是声明。属性:值 。如果有多个声明,则用 ;连接。
在这里插入图片描述
二、注释代码
CSS用 /* 注释 */ 来进行注释。(html是用<!- -注释- ->)
在这里插入图片描述

三、CSS代码插入的形式有三种 :内联式、嵌入式、外部式
1、内联式CSS样式
内联式就是把CSS代码直接写入Html标签中。(要写在开始标签中)
在这里插入图片描述
内联式的CSS代码要写在style=" "双引号中,如果有多条CSS样式,可以使用分号 ; 隔开。
在这里插入图片描述
2、嵌入式CSS样式
把CSS代码写入 < style type=“text/css”> < /style> 之间。
在这里插入图片描述
3、外部式(外联式)
将CSS代码单独写入到一个外部文件中,这个CSS文件以 " .css"为拓展名。在< head>标签之间(不是style)使用< link>标签将CSS样式文件加入到Html文件中。
在这里插入图片描述

1、css样式文件名称以有意义的英文字母命名,如 main.css。

2、rel=“stylesheet” type=“text/css” 是固定写法不可修改。

3、< link>标签位置一般写在< head>标签之内。

三种写法的优先级:内联式 > 嵌入式 > 外联式 。
其中,嵌入式 > 外联式的前提是,嵌入式CSS样式所写的位置要在外联式的后面。

四、选择器
1、标签选择器
如:p、h1、h2、span、head等

2、类选择器
在这里插入图片描述
使用方法:
第一步:需要设样式的内容对应的标签要添加class属性。
在这里插入图片描述
第二步:设置类选择器的样式
在这里插入图片描述

3、id选择器
设置id=“id名称”
在这里插入图片描述
为id选择器设置样式
在这里插入图片描述

类选择器和id选择器区别:
类选择器使用点 .  ,而id选择器使用 # 。同一个类选择器能多次使用,而同一个id选择器在文档中只能使用一次。
可以使用类选择器列表方法为一个元素设置多个样式。而id选择器不可以。

在这里插入图片描述
4、子选择器
大于符号> ,用于选择指定标签元素的第一代子元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello HTML</title>
    <style>
        #test>li{
            border:1px solid aquamarine;
        }
    </style>>
</head>
<body>
<label>子代选择器</label>>
<div name="div1">
    <ol id="test">
        <li>第一代
            <ul>
                <li>第二代</li>>
                <li>第二代</li>>
            </ul>>
        </li>>
        <li>第一代
            <ul>
                <li>第二代</li>>
                <li>第二代</li>>
            </ul>>
        </li>>
    </ol>>
</div>>
</body>
</html>

在这里插入图片描述
5、包含(后代)选择器
使用空格 ,来选择指定标签元素的 所有子后代元素。
将上述代码中的:
#test>li{ border:1px solid aquamarine; }
改成:
#test li{ border:1px solid aquamarine; }
在这里插入图片描述
6、通用选择器
使用一个通配符(*)来指定使用html中的所有标签元素。

如:下面代码会使 使用html标签中文本字体变成红色。
在这里插入图片描述
7、伪类选择符
最常用的组合:a:hover 组合
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello HTML</title>
    <style>
        a:hover{
            font-size:30px;
            color:yellow;
        }
    </style>>
</head>
<body>
<label>伪类选择符</label>>
<div name="div1">
    <p>这是一段很长的关于<a href="http://www.biadu.com">波多野结衣</a>>的话。</p>>
</div>>
</body>
</html>

运行结果:当鼠标放在波多野结衣上时,字体会变化。

在这里插入图片描述
8、分组选择符
使用符号 ,来进行连接多个标签元素。

.first,#second{
    color:blue;
    font-size=20px;
}

如:
在这里插入图片描述
相当于:
在这里插入图片描述
五、继承、特殊性、层叠、重要性

1、继承:
CSS中的 某一些样式 具有继承性,继承是一种规则,意思是,该样式不仅应用到某一个标签元素,还将会应用到该标签的子后代元素上。比如:颜色。但是 有一些样式不具有继承性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello HTML</title>
    <style>
        p{
            color:red;   /*color具有继承性*/
            border:1px solid greenyellow;  /*border不具有继承性*/
        }
    </style>>
</head>
<body>
<div name="div1">
    <p>这是一段很长很长的话,是关于<span>鲁迅</span>先生的。</p>>
</div>>
</body>
</html>

结果如下:color样式不仅应用到了< p>标签上,还应用到他的子后代< span>标签上。而border样式只应用到了< p>标签上。
在这里插入图片描述
2、特殊性:
如果对同一设置不同的CSS样式代码,浏览器则会按照权值的大小来选择应用哪一种样式,权值高的就用应用。
在这里插入图片描述
3、层叠:
在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。

由层叠的性质可知:CSS样式的优先级,内联式>嵌入式>外联式

4、重要性:
有时某些样式需要被设置成最高权值,这是可以使用 !important。

在这里插入图片描述
六、文字排版
1、字体

body{
font-family:"Microsoft Yahei";  /*设字体为微软雅黑*/
}

注意:使用 “Microsoft Yahei” 或 “微软雅黑” 都可以显示,但是使用字母会更兼容。

2、颜色

p{
color:red;  //设字体为红色
}

3、字号

span{
font-size:20px;  //设字号为20px
}

4、粗体

h{
font-weight:bold;  //加粗
}

5、斜体
label{
font-style:italic; //设置斜体
}
6、下划线

< label style="text-decoration:underline"> Hello Man < /label>

7、删除线

< p>原价:
    < span style="text-decoration:line-through"> 300元 < /span>
    &nbsp
    现价:299元
< /p>

在这里插入图片描述
七、段落排版
1、缩进

p{
text-indent:2em;  /*段落首行缩进2个字符*/
}

2、行间距

p{
line-height: 1.5em ; /*调整段落行间距为1.5em*/
}

3、文字间距、单词间距、字母间距

p{
letter-spacing:50px;  /*设置文字之间的间距 或 字母之间的 间距*/
} 


h1{
word-spacing:50px;  /*设置单词之间的间距*/
}

注意:要区分 文字之间、字母之间、单词之间的间距。

4、对齐
为 块状元素 中的文本、图片设置为居中、居左 或 居右。

div{
text-align:center;/*居中*/
}

p{
text-align:left; /*居左*/
}

p{
text-align:right; /*居右*/
}

八、盒模型

块状元素、内联元素、块状内联元素

1、什么是盒模型?
盒模型就是盒状的边框,里面内容为文本、图片或其他标签元素。盒模型有 内填充 padding(内容到盒边框的距离)、外边距 margin(盒模型之间的距离)、边框 border(盒模型边框)。padding、margin、border 都有四个方向(left、right、top、botom)。像< div>、< ul> 、< table>等块状元素都具有盒模型的特征。

2、边框 border
可以设置边框的 粗细(border-width)、样式(border-style)、颜色(border-color) 三个属性。
边框样式(border-style)有 dashed(虚线)、dotted(点线)、solid(实线)。

3、填充
上、右、下、左(顺时针)。

九、布局模型
流动模型(Flow)、浮动布局(Float)、层模型(Layer)。

网页默认是流动布局。

1、流动模型
特点:块状元素会自上而下的按顺序垂直延伸分布。内联元素从左至右水平方向分布。

2、浮动模型
添加 float:left 设置为左浮。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值