一

一、CSS简介

1.1、什么是CSS?

CSS(Cascading style sheets)：层叠样式表

CSS作用：给页面中的HTML标签设置样式

1.2、CSS语法规则

写在哪里？

css写在style标签中，style标签一般写在head标签里面，title标签下面；

怎么写？

利用css选择器

1.3、css初体验

常见属性：

color：文字颜色；

font-size：字体大小；

background-color：背景颜色；

width：宽度；

height：高度；

css标点符号都是英文状态下的；每一个样式键值对写完之后都需要加分号结尾；

<head>   <style>p{/* 文本颜色 */color: red;/* 文字大小 */font-size: 30px;/* 背景颜色 */background-color: skyblue;/* 宽度 */width: 300px;/* 高度 */height: 300px;}</style>
</head>
<body><p>你好，世界</p>
</body>

1.4、CSS 引入方式

内嵌式：CSS写在style标签中

style标签虽然可以写在页面任意位置，但是通常约定写在head标签中；

外联式：CSS写在单独的一个.css文件中

需要通过link标签在网页中引入；

行内式：CSS写在标签的style属性中

配合js使用；

二、基础选择器

1、标签选择器

结构：标签名{css属性名:属性值;}

作用：通过标签名找到页面中所有这一类标签，设置样式

注意点：标签选择器选择的是一类标签，而不是单独某一个；

标签选择器无论嵌套关系有多深，都能找到对应的标签；

<head><style>p{color: red;       }div{color:skyblue;}</style>
</head>
<body><p>我是一个p</p><p>我是一个p</p><div>我是div</div><div>我是一个div</div><div><div><div><p>我是一个p</p></div></div></div>
</body>

2、类选择器

结构：.类名{css属性名:属性值;}

作用：通过类名，找到页面中所有带这个类名的标签，设置样式

注意点：所有标签上都有class属性，class属性的属性值称为类名（类似于名字）；

类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头；

一个标签可以同时有多个类名，类名之间以空格隔开；

类名可以重复，一个类选择器可以同时选中多个标签；

     <style>.red{color: red;}.yellow{color: yellow;}.pink{color: pink;}</style><body><p class="red big">小红</p><p class="red">小红2</p><p class="yellow">小黄</p><p class="pink">小粉</p>
</body>

3、id选择器

结构：#id属性值{css属性名:属性值;}

作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式；

注意点：所有标签上都有id属性；

id属性值类似于身份证号码，在一个页面中是唯一且不可重复的；

一个标签上只能有一个id属性值；

一个id选择器只能选中一个标签；

        #one{color: purple;}#two{color:royalblue;}<div id="one">id选择器1</div><div id="two">id选择器2</div>

类与id的区别：

class类名与id属性值的区别：

class类名相当于姓名，可以重复，一个标签可以同时有多个class类名；

id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值；

类选择器与id选择器的区别？

类选择器以 . 开头；

id选择器以 # 开头；

实际开发的情况：

类选择器用的最多；

id一般配合js使用，除非特殊情况，否则不要使用id设置样式；

实际开发中会遇到冗余代码的抽取（将一些公共代码抽取到一个公共的类中）；

4、通配符选择器

结构：*{css属性名:属性值;}

作用：找到页面中所有的标签，设置样式；

注意点：开发中使用极少，只会在极特殊情况下才会用到；

在基础小页面中可能会用于去除标签默认的margin和padding;

        *{color:seagreen;}<p>我是p</p><h1>我是h1</h1><div>我是div</div><span>我是span</span>

三、字体和文本样式

1、字体样式

1.1、字体大小 font-size

属性名：font-size

取值：数字 + px

注意点：谷歌浏览器默认文字大小是16px;单位需要设置，否则无效；

1.2、字体粗细 font-weight

属性名：font-weight

取值：

关键字：normal 正常

bold 加粗

纯数字：100~900的整百数

400 正常

700 加粗

注意点：不是所有字体都提供了九种粗细，因此部分取值页面中无变化；

实际开发中以正常、加粗两种取值使用最多；

1.3、字体样式（是否倾斜） font-style

属性名： font-style

取值：正常 normal

倾斜 italic

1.4、常见字体系列

无衬线字体：（sans-serif）

特点：文字笔画粗细均匀，并且首尾无装饰；

场景：网页中大多采用无衬线字体；

常见该系列字体：黑体、Arial；

衬线字体：（serif）

特点：文字笔画粗细不均，并且首尾有笔锋装饰；

场景：报刊书籍中应用广泛；

常见该系列字体：宋体、Times New Roman;

等宽字体：（monospace）

特点：每个字母或文字的宽度相等；

场景：一般用于程序代码书写，有利于代码的阅读和编写；

常见该系列字体：Consolas、fira code

1.5、字体类型 font-family

属性名：font-family

常见取值：具体字体1，具体字体2，具体字体3，具体字体4，.... ，字体系列

具体字体：微软雅黑、黑体、宋体、楷体等.....

字体系列：sans-serif、serif、monospace等.....

渲染规则：从左往右按顺序查找，如果电脑中未安装该字体，则显示下一个字体；

如果都不支持，此时会根据操作系统。显示最后字体系列的默认字体；

注意点：如果字体名称中存在多个单词，推荐使用引号包裹；

最后一项字体系列不需要引号包裹；

网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正常显示

1.6、样式的层叠问题

如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效；

        p{/* 字体大小 */font-size: 30px;/* 字体粗细 */font-weight: 700;/* 字体样式 */font-style:italic;/* 字体类型 */font-family: 楷体;}<p>我是1个p</p>

1.7、字体font相关属性的连写

属性名：font

取值：font：style weight size family

顺序要求：swsf（稍微舒服）

省略要求：只能省略前两个，如果省略了相当于设置了默认值；

注意点：如果需要同时设置单独和连写方式

要么把单独的样式写在连写的下面。要么把单独的样式写在连写的里面；

        p{/* 字体大小 */font-size: 30px;/* 字体粗细 */font-weight: 700;/* 字体样式 */font-style:italic;/* 字体类型 */font-family: 楷体;}div{font:italic 700 30px 楷体;}span{font:30px 楷体;}<p>我是1个p</p><div>我是一个div</div> <span>我是一个span</span>

2、文本样式

2.1 文本缩进

属性名：text-indent

取值：数字 + px

数字 + em (推荐： 1em = 当前标签的font-size的大小)

2.2、文本水平对齐方式

属性名：text-align

left：左对齐

center：居中

right：右对齐

如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置

2.3、文本修饰

属性名：text-decoration

下划线：underline

删除线：line-throught

上划线：overline

无装饰线：none

开发中会使用text-decoration：none清除 a 标签默认的下划线；

2.4、水平居中方法总结

text-align:center;

text-align:center能让哪些元素水平居中？

文本、span标签、a标签、input标签、img标签

如果需要让以上元素水平居中，texttext-align:center;需要给以上元素的父元素设置；

margin：0 auto；

如果需要让div、p、h（大盒子）水平居中，可以使用margin：0 auto；实现；

如果需要让div、p、h（大盒子）水平居中，直接给当前元素本身设置即可；

margin：0 auto；一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度；

3、行高

作用：控制行间距（给一行上下增加间距）

属性名：line-height

取值：数字 + px / 倍数（当前标签font-size的倍数）

应用：让单行文本垂直居中可以设置line-height：文字父元素高度；

网页精准布局时，会设置line-height：1可以取消上下间距；

行高与font连写的注意点：

如果同时设置了行高和font连写，注意覆盖问题；

font：style weight size/line-height family

四、案例

    <style>.box{width: 800px;/* height: 800px; *//* background-color: rgb(41, 106, 128); */margin: 0 auto;}h1{text-align: center;}.info{text-align: center;}.time{color: #808080;}.sina{color: #87ceeb;font-weight: 700;}.link{text-decoration: none;}p{text-indent: 2em;}</style><body><div class="box"><h1>《生命》</h1><div class="info"><span class="time">沈从文（1902—1988）</span><span class="sina">新浪科技</span><span class="link"><a href="#">收藏本文</a></span></div><hr><p>我好像为什么事情很悲哀，我想起“生命”。</p><p>……</p><p>有什么人能用绿竹作弓矢，射入云空，永不落下？我之想象，犹如长箭，向云空射去，去即不返。长箭所注，在碧蓝而明静之广大虚空。</p><p>明智者若善用其明智，即可从此云空中，读示一小文，文中有微叹与沉默，色与香，爱和怨。无著者姓名。无年月。无故事。无……然而内容极柔美。虚空静寂，读者灵魂中如有音乐。虚空明蓝，读者灵魂上却光明净洁。</p><p>大门前石板路有一个斜坡，坡上有绿树成行，长干弱枝，翠叶积叠，如翠等，如羽葆，如旗帜。常有山灵，秀腰白齿，往来其间。遇之者即喑哑。爱能使人喑哑——一种语言歌呼之死亡。“爱与死为邻”。</p><p>然抽象的爱，亦可使人超生。爱国也需要生命，生命力充溢者方能爱国。至如阉寺性的人，实无所爱，对国家，貌作热诚，对事，马马虎虎，对人，毫无情感，对理想，异常吓怕。也娶妻生子，治学问教书，做官开会，然而精神状态上始终是个阉人。与阉人说此，当然无从了解。</p></div></body>

    <style>body{background-color: #f5f5f5;}.box{width: 234px;height: 300px;background-color: #fff;margin: 0 auto;text-align: center;}.pic{width: 160px;}.product{font-size: 14px;height: 25px;}.info{font-size: 12px;color:#cccccc;height:30px;}.price{font-size: 14px;color: #ffa500;}</style><body><div class="box"><img src="../images/smallcar.jpg" class="pic"><div class="product">大号平衡车</div><div class="info">成年人的玩具</div><div class="price">1999元</div></div>
</body>

css笔记一-CSS简介、基础选择器、字体和文本样式相关推荐

CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表
前言:本篇文章为 CSS 基础系列笔记第一篇,参考黑马程序员pink老师前端入门教程如有侵权联系删除,如有问题欢迎指出. 其他CSS基础相关文章: CSS基础「二」复合选择器 / 元素显示模式 / ...
CSS基础：基础选择器、字体和文本样式
CSS基础 Date: August 31, 2022 Summary: 基础选择器.字体和文本样式基础认知学习路径: CSS初识 CSS引入方式 CSS初识 CSS介绍 CSS:层叠样式表(Ca ...
【前端学习笔记】(三)（CSS基础、选择器、字体和文本样式）
目录一.基础认知 1.1 CSS介绍 1.2 CSS语法规则 1.3 CSS常见属性 1.4 CSS引入方式 1.5 CSS常见三种引入方式的区别二.基础选择器 1.标签选择器 2.类选择器 3. ...
CSS基础选择器、字体和文本样式
一.CSS简介美化网页.布局页面 CSS(层叠样式表Cascading Style Sheets)(CSS样式表或级联样式表) 主要用于设置HTML中的文本内容(字体.大小.对齐方式等).图片的外形 ...
CSS基础(基础选择器+字体文本相关样式)
文章目录目录前言一.css的语法规则二.css引入方式三.基础选择器四.字体和文本样式字体样式文本样式 line-height行高前言层叠样式表(Cascading Style S ...
CSS基础之字体、文本的基础设置
CSS基础之字体.文本的基础设置一.font字体常用属性: 1.文字大小:font-size,单位px一定要加,默认16号. 2.文字粗细:font-weight,取值范围为100-900,属性取值 ...
HTML标记fort属性最大取值,CSS(2)---css字体、文本样式属性
css字体.文本样式属性这篇主要讲CSS文本属性中的:字体样式属性和文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...
CSS基础-03-字体和文本样式
文章目录前言一.字体样式大小粗细是否倾斜字体类型拓展:层叠性字体font相关属性的连写二.文本样式文本缩进文本水平对齐方式文本修饰行高前言字体和文本样式一.字体样式大 ...
05使用CSS设置字体和文本样式
使用CSS设置字体和文本样式: 1.定义字体类型font-family 用法: font-family:name; font-family:ncursive|fantasy|monospace|ser ...

css笔记一-CSS简介、基础选择器、字体和文本样式

一

一、CSS简介

1.1、什么是CSS?

1.2、CSS语法规则

1.3、css初体验

1.4、CSS 引入方式

二、基础选择器

1、标签选择器

2、类选择器

3、id选择器

4、通配符选择器

三、字体和文本样式

1、字体样式

1.1、字体大小 font-size

1.2、字体粗细 font-weight

1.3、字体样式（是否倾斜） font-style

1.4、常见字体系列

1.5、字体类型 font-family

1.6、样式的层叠问题

1.7、字体font相关属性的连写

2、文本样式

2.1 文本缩进

2.2、文本水平对齐方式

2.3、文本修饰

2.4、水平居中方法总结

text-align:center;

3、行高

css笔记一-CSS简介、基础选择器、字体和文本样式相关推荐

最新文章

热门文章

css笔记一-CSS简介、基础选择器、字体和文本样式

一

一、CSS简介

1.1、什么是CSS?

1.2、CSS语法规则

1.3、css初体验

1.4、CSS 引入方式

二、基础选择器

1、标签选择器

2、类选择器

3、id选择器

4、通配符选择器

三、 字体和文本样式

1、字体样式

1.1、字体大小 font-size

1.2、字体粗细 font-weight

1.3、字体样式 （是否倾斜） font-style

1.4、常见字体系列

1.5、字体类型 font-family

1.6、样式的层叠问题

1.7、字体font相关属性的连写

2、文本样式

2.1 文本缩进

2.2、文本水平对齐方式

2.3、文本修饰

2.4、水平居中方法总结

text-align:center;

3、行高

css笔记一-CSS简介、基础选择器、字体和文本样式相关推荐

最新文章

热门文章

三、字体和文本样式

1.3、字体样式（是否倾斜） font-style