CSS选择器、font、文本、引入方式

目录

选择器:

①标签选择器

②类选择器

③id选择器

④通配符选择器

选择器总结:

font系列

①字体

②字号大小

③字体粗细

④文字样式

⑤font复合属性写法(简写) 

字体总结:

文本

①文本颜色

②文本对齐

④ 文本缩进 text-indent

⑥文本总结

CSS的引入方式(样式书写位置)

①内部样式表(内嵌样式表) 

②行内样式表(内联样式表)

③外部样式表(实际开发用这种)

④总结


HTML:只关注内容的语义

<h1>大标题

<p>段落

<img>图片

<a>链接

CSS-网页的美容师

CSS即:层叠样式表 (Cascading Style sheets)也称CSS样式表或级联样式表

CSS最大价值:由HTML专注去做结构呈现,样式交给CSS,即结构HTML和样式CSS相分离。

CSS规则:选择器 一条或多条声明

h1{color:red; font-size:25px;}

选择器{声明;声明;}

选择器{属性:值;属性:值;}

<head>
<style>
    p{
        color:red;
        }
</style>
</head>

<body>
    <p>有点意思</p>
</body>

font-size:12px;像素

选择器{样式} 即 给谁改样式{改什么样式}

样式格式书写:展开格式

h3{

        color:pink;

        font-size:20px;

}

样式用小写字母

·h3空格{

        color:空格pink;

}

CSS选择器作用:选择标签用的

CSS 选择器:选对人 设置标签样式(做对事)

选择器:

基础选择器:由单个选择器组成:标签\类\id\通配符选择器

复合选择器

①标签选择器

标签名{

        属性1:属性值1;er5

        属性2:属性值2;

          ...

}

②类选择器

(差异化选择不同的标签)

类名{

        属性1:属性值1;

        ...

}

.red {

        color: red;

 }

结构需要用class属性来调用class

<div class='red'>变红色</div>

类选择器口诀:样式定义 结构class调用 一个或多个 开发最常用

长名称或词组可用中横线来为选择器命名 尽量用英文字母来表示

类选择器——多类名

<div class="red font20">亚瑟</div>

1、在标签class属性中写多个类名

2、多个类名中间必须用空格分开

③id选择器

id属性只能在每个HTML文档中出现一次

口诀:样式#定义,结构id调用,只能调用一次,别人切勿使用。

<style>
    #pink{
        color:pink;
    }
</style>
</head>
<body>
    <div id="pink">shoto小狗</div>
</body>

④通配符选择器

*表示选取页面中所有元素(标签)

*{

        属性1:属性值1;

        ...

}

通配符选择器不需要调用,自动就给所有的元素使用样式

特殊情况才使用

(清除所有元素标签的内外边距)

*{

        margin:0;

        padding:0;

}

选择器总结:

标签选择器可以选出所有相同的标签,比如p不能差异化选择使用情况较多

用法

p{color:red;}

类选择器可以选出1个或多个标签可以根据需求选择非常多.nav{color:red;}
id选择器一次只能选择1个标签ID属性只能在每个HTML文档中出现一次一般和js搭配#nav{color:red;}
通配符选择器选择所有的标签选择的太多,有部分不需要特殊情况使用*{color:red;}

font系列

①字体

电脑无第一个字体会找下一个

div{font-family:Arial,"Microsoft Yahei","微软雅黑";}

各种字体间用英文状态下的逗号隔开,有空格隔开的多个单词组成的字体,加引号。

body{font-family:"Microsoft YaHei"} 可以给body设置字体

②字号大小

可以给body指定整个页面文字的大小

单位:px

body{

        font-size:16px;

}

标题标签比较特殊,需要单独指定文字大小

h2 {

        font-size:18px;

}

③字体粗细

font-weight:normal(默认)正常的字体,相当于number中的400|bold粗体|bolder特粗体|lighter细体|number最常使用

.bold {
        font-weight:700;/*font-weight:bold;*/
    }
h2 {
        font-weight:400;/*font-weight:normal;*/
    }
<h2>pink的秘密</h2>
<p class ="bolder">前端总是伴随快乐</p>

如果文字特别重要,用strong标签更好

number中700等同于bold 数字后不跟单位

④文字样式

font-style:normal默认值 italic斜体

p {

        font-style:normal;

}

比较常见的时:让倾斜的字体不倾斜

<style>

        em{

                font-style:normal;

}

</style>

<body>

            <em>下课</em> //或<i> </i>

</body>

⑤font复合属性写法(简写) 

不可调换位置 用空格隔开

font:font-style font-weight font-size/line-height font-family

font-size 字号和font-family字体这2个属性必须保留

不需要设置的属性可以省略(取默认值)

例如:

font:italic 700 16px 'Microsoft yahei';

字体总结:

font-size字号单位:px
font-family字体
font-weight字体粗细加粗:700不加单位/bold 不加粗:normol/400
font-style字体样式倾斜:italic 不倾斜:normal
font字体连写不能随意换位置font:font-style font-weight font-size/line-height font-family

文本

①文本颜色

div {

        color :red;

}

预定义的颜色值: red green blue pink

十六进制: #FF0000

红绿蓝 rgb (255,0,0)或rgb(100%,0%,0%)

②文本对齐

text-align:水平对齐方式

left right center

div {

        text-align:center;

}

③文本装饰 text-decoration

none 默认,没装饰线(最常用)

underline 下划线 (常用)(链接自带)

overline 上划线

line-through 删除线

怎么删除下划线? 取消a默认的下划线

a {

        text-decoration:none;

}

<a href="#">粉红色的回忆</a>

添加下划线 

div {

        text-decoration:underline;

}

④ 文本缩进 text-indent

常用于:段落的首行缩进

文本的第一行首行缩进多少距离

text-indent:20px;

2em:缩进当前元素 2个文字大小的距离

text-indent:2em;

em是一个相对单位(常用)

⑤行间距 line-height

控制行与行之间的距离

即改变上下间距

p {

        line-height: 26px;

}

若文本高度为15px 行间距为25px 那么上/下间距(相同):5px

⑥文本总结

color 通常用十六进制

text-align 设置文字水平的对齐方式

text-indent 通常段落缩进2个字 2em

text-decoration 添加下划线:underline 取消:none

line-height 行与行之间距

CSS的引入方式(样式书写位置)

样式表:

行内样式表(行内式)

内部样式表(嵌入式)

外部样式表(链接式)

①内部样式表(内嵌样式表) 

嵌入式引入

是将所有的CSS代码抽取出来,单独放到一个<style>标签中,一般放在<head>中

可以控制当前整个页面中的元素样式设置

就是在html页面内部写样式,但是是单独写到style标签内部

②行内样式表(内联样式表)

行内式引入

在元素标签内部的style属性中设定CSS样式

<div style="color:red;font-size:12px;">青春</div>

注意双引号 

只能控制当前的标签

没有体现出结构与样式相分离

只有对当前元素添加简单样式时推荐使用

③外部样式表(实际开发用这种)

外联式/链接式引入

样式单独写到CSS文件中,之后把CSS文件引入到HTML页面中使用

步骤:1、新建.CSS文件内 (不用写<style>标签)只写样式 没标签

2、在HTML页面<head>里,用<link>引入文件<link rel="stylesheet" href="CSS文件路径">

④总结

行内样式表书写方便,权重高结构样式混写控制一个标签
内部样式表部分结构和样式相分离没彻底分离控制一个页面
外部样式表完全实现结构和样式分离需引入推荐控制多个页面

#666666 可以简写为#666

#ff00ff可以简写为#f0f

必须是两两相同

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值