重头学习html5+css3系列笔记（3）

最新推荐文章于 2024-07-17 12:21:01 发布

shadow fish

最新推荐文章于 2024-07-17 12:21:01 发布

阅读量149

点赞数

分类专栏：笔记文章标签： css html5

本文链接：https://blog.csdn.net/qq_45862085/article/details/108803327

版权

笔记专栏收录该内容

24 篇文章 2 订阅

订阅专栏

css

css 设置文本内容（字体，大小，对齐方式），图片的外形（宽度，边框样式，边距），版面的布局和外观显示样式 css美化html 让html专注于结构

css由两部分构成选择器+一条或多条声明

css选择器

又分基础选择器和复合选择器两大类

基础选择器

由单个选择器构成，又包括标签选择器，id选择器，类选择器，统配符选择器

标签选择器

将同类型标签全部选择出来

类选择器

开发中最常用的一类选择器，谁去使用，就去调用该类名
多类名
一个标签可以包含多个类名每个类名对应一个职责，减少耦合性，剥离，增加利用率（我的想法是，类内的属性越少，利用率也越高，那么可不可以把原始的属性都看作一个类，而我们的工作就是将这些一个个的类进行二次整合，方便我们调用，所以这就要求我们仔细思考，合理分配内容）

id选择器

唯一性，虽然也可以在多个中调用…但违背了原则，因为id是标识性的，这样在后续中方便与js搭配使用

通配符选择器

选中所有的元素标签

复合选择器

复合选择器是对普通选择器进行组合行成的，包括后代选择器，子选择器，并集选择器，伪类选择器等（将所选的元素缩小在一定范围，减少类名的使用）

后代选择器

可以选择父元素里的子元素，可以是儿子，也可以是孙子，只要是后代可以层层嵌套，也可以直接定位，即中间间隔各个辈分
语法：用空格隔开
父标签子标签子标签… ｛样式声明｝
对应位置也可以用标签的类名或id进行代替
如

.center a {}

子选择器

只能选择最近一级的子标签，也就是儿子

后代选择器与子选择器区别

<div class="center">
        <a href="#">12345</a>
        <span>09-27 08:40 来源：<a href="#">北京晚报官网</a></span>
        <!-- a标签继承了大小，没有继承颜色，说明a标签有颜色设置，无大小设置 -->
        <input type="text" placeholder="请输入查询的条件">
        <button>搜索</button>
    </div>

如果是后代选择器

.center a{}

则center内部的a都会选中
如果是子选择器

.center > a {
  color: green;
}

则只有第一级的标签即123456的a标签被选中

并集选择器

选择多组标签，为他们定义相同的样式
语法
元素1,元素2｛｝
如
ul, ol { color: green; }

伪类选择器

主要特征是有冒号
链接伪类选择器
a:link 选择未被访问的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停时的链接
a:active 选择鼠标按下但未松开的链接
注意这四个顺序不能颠倒，否则会失效
a标签需要单独指定样式
开发中最常用的是用a定义初始样式，用a：hover定义悬停状态即可
：focus伪类选择器
选取获得焦点的表单元素

字体属性

字体系列

  font-family: 'Microsoft YaHei','宋体',Arial, Helvetica, sans-serif;

多个字体之间用逗号分隔，有的字体是两个单词，如微软雅黑字体，可以用双引号包裹
写多个字体是为了保持良好的兼容性，浏览器会从第一个开始识别，如果可是识别，则显示，如果无法识别，则继续向后识别，类似备胎。。。如果都找不到，就会使用浏览器默认的字体
可以直接在body标签选择器中直接放入font-family属性

字体粗细

 font-weight: bold;

当然还有strong标签也可以加粗
font-weight 其他属性值：
normal | bold | bolder | light | 数字（不需要单位，100~900）
400等同于normal，700等同于bold ，实际开发中一般用数字

字体样式

font-style: italic;

一般定义字体的风格，如斜体，
italic | normal
em标签也可以倾斜字体

字体的复合属性

  /* font: font-style font-weight font-size/line-height font-family; */
           font: italic 700 16px/20px 'Microsoft yahei'

其实就是代码简化，提交效率，节约空间，但注意顺序不能颠倒
不需要的属性可以省略，但必须保留font-size和font-family

文本属性

文本属性定义文本的外观，比如文本的颜色，对齐文本，装饰文本，文本缩进，行间距等

文本颜色

color: red;

颜色有三种形式：
预定义的颜色，如red，green，deeppink等
十六进制颜色 #cc00ff
RGB代码：rgb(255,0,0) rgb(100%,0%,0%)
(red green blue)原生三色

对齐文本

 text-align: center;

text-align(align是排整齐，使成一条直线的意思），该属性可以设置元素内文本的水平对齐方式属性值有：left right center等

装饰文本

 text-decoration: underline;

text-decoration属性规定添加文本修饰，比如可以给文本加一些下划线，上划线，删除线等
属性值：
none 默认无装饰
underline 下划线 a标签自带下划线
overline 上划线
line-through 删除线

文本缩进

 text-indent: 10px;

文本第一行首行缩进，也可以写负值
也可以用em单位
em是相对单位，相对是指相对于当前文字大小，1em等于一个文字的大小，如果当前没有设置大小，则会按照父元素1个文字的大小

行间距

line-height: 10px;

行间距=上间距+文本高度+下间距