Css学习笔记(一)

最新推荐文章于 2022-12-06 22:26:42 发布

mikw999

最新推荐文章于 2022-12-06 22:26:42 发布

阅读量171

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/mikw999/article/details/100889612

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Css的样式规则

Css规则由两个主要的部分构成：选择器，以及一条或多条声明
在这里插入图片描述

1，选择器用于指定css样式作用的HTML对象，花括号内是对该对象设置的具体样式。

2，属性和属性值通常以键值对的形式出现

3，属性是对指定的对象设置的样式属性，例如字体大小，文本颜色等。

4，属性和属性值之间用英文的":"连接

5，多个键值对之间用英文的";"来区分

总结：css可以把html的内容和结构分开，当你更改某个结构样式或者是内容的时候，仅仅需要修改相应的代码，而不用去触碰另外的代码，降低了容错率，解耦合；

Css字体样式属性

font-size用来设置字号，该属性可以使用相对长度或者绝对长度。一般使用相对长度，尤其是px（像素）
在这里插入图片描述
font-family 用来设置字体，网页中常用的字体由宋体，微软雅黑，黑体等

body {font-family: sans-serif , Georgia;}

可以同时指定多个字体，中间已逗号隔开，如果浏览器不支持第一个字体，就回去尝试下一个，直到找到合适的字体

CSS Unicode字体

在css中设置字体，直接写中文可以，但是如果在文件编码不匹配（GB2312,UTF-8）不匹配的hi后会产生错误代码。
这种时候我们就可以使用英文或者Unicode编码来代替

 font-family: "\5FAE\8F6F\96C5\9ED1" 这就是微软雅黑

在这里插入图片描述

常用技巧

1，网页普遍使用14px
2，尽量使用偶数的数字字号。老式浏览器基数会由bug。
3，各种字体中间必须以英文逗号隔开
4，中文字体需要加英文状态下的引号，英文字体不用加，当设置英文字体时候，英文字体必须再中文字体名字前。
5，如果字体名称包含空格，#，$等符号，则字体必须加英文状态下的单引号或者双引号如 font-family: 'Courier New',
6，尽量使用系统默认字体，保证任何用户再浏览器里都能显示正确

font-weight 字体粗细
字体的加粗除了可以使用b和strong的标签外，最好通过css来实现

font-weight: normal

可用属性是normal，bold，bolder，100-900的倍数
其中normal=400 ，700=bold ，在使用过程中建议使用数字表示

font-style 字体风格
字体的style属性用于定义字体风格，如设置斜体，倾斜，或者正常字体
normal: 默认值浏览器给的标准字体样式
italic：倾斜
oblique:倾斜
平时我们我们很少给文字加斜体，反而喜欢给斜体标签改成普通的样式

font：综合设置字体样式

选择器{  font:font-style  font-weight font-size/line-height font-family;}

书写的时候必须按照上述语法格式的顺序写，不能更换顺序，各个属性以空格隔开。其中不要这使得属性可以省略，但必须保留font-size和font-family属性，否则font属性将不起作用。

Css选择器

1，标签选择器（元素选择器）

标签选择器是指用HTML标签名作为选择器，按标签名分类，为页面某一类标签指定统一的css样式，语法格式如下

属性名{属性1:属性值1;属性2:属性值2 ;}   或者
元素名{属性1:属性值1;属性2:属性值2 ;}

标签选择器的最大优点是能够快速的为页面中同类型的标签添加统一样式，同时这也是他的缺点，不能够设计差异化样式。

2，类选择器

类选择器使用"."（英文点）进行标识，后面紧跟类名。语法如下

.类名{属性1:属性值1;属性2:属性值2 ;}

标签调用的时候 class=”类名“ 即可
类选择器的最大优势是可以为元素对象定义单独或者相同的样式

小技巧
1，长命或者词组可以使用中横线来为选择器命名
2，不建议使用”_“下划线来命名css选择器

2.1，多类名选择器

在这里插入图片描述
1，样式显示效果跟HTML元素中的类名先后顺序没有关系，受css样式书写的上下顺序有关。
2，各类名中间用空格隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
      .font20
      {
        font-size: 20px;
      }
      .font18
      {
          font-size: 18px;
      }
      .pink
      {

            color: pink
      }

    </style>
</head>
<body>
   <div class="font20 pink" >A</div>
   <div class="font20">B</div>
   <div class="font18">C</div>
   <div class="font18 pink">D</div>
</body>
</html>

显示的结果是这样
在这里插入图片描述
多类名的好处就是搭配比单类名自由，可以满足更好的调整样式

3，ID选择器

id选择器使用”#“来进行表示，后面紧跟id名，语法格式如下

#id名{属性1:属性值1;属性2:属性值2 ;}

在改语法中，id即HTML元素的id属性值，大多数HTML元素都可以定义ID属性，元素的id值是唯一的，只能对应文档中某一个具体的元素。用法和类选择器基本相同

ID选择器和类选择器的区别:

在同一个页面内，不允许有相同名字的id对象出现名单时允许相同名字的class。
类选择器好比是人名，可以多次重复使用；
ID选择器好比身份证号码，全国唯一，不得重复，只能使用一次

4，通配符选择器

通配符选择器用”*“号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素，格式语法如下

*{属性1:属性值1;属性2:属性值2 ; }

例如下面代码，使用通配符选择器定义css样式，清除所有HTML标记的默认边距

 *
        {
            margin: 0;    /* 外边距 */
            padding: 0;   /* 内边距 */
        }

4，伪类选择器

伪类选择器用于向某些选择器添加特殊效果，比如给连接添加特殊效果，也可以选择第一个，第n个元素

连接伪类选择器

 	  :link     /* 未访问的连接 */
      :visited  /* 已访问的连接 */
      :hover    /* 鼠标移动到链接上 */
      :active   /* 选定的链接 */
      /* 注意书写的时候经量不要颠倒顺序 */

结构(位置)伪类选择器

      :first-child        : 选取属于其父元素的首个子元素的指定选择器
      :last-child         : 选取属于其父元素的最后一个子元素的指定选择器
      :nth-child(n)        : 匹配属于其父元素的第N个子元素，不论元素类型
      :nth-last-child(n)   : 选择器匹配属于其元素的第N个子子元素的每个元素，不论类型，从最后一个子元素开始计算 n可以是数字，关键词或公式

目标类选择器

:target 目标伪类选择器用于选取当前活动的目标元素

mikw999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Css学习笔记(一)

Css的样式规则Css规则由两个主要的部分构成：选择器，以及一条或多条声明1，选择器用于指定css样式作用的HTML对象，花括号内是对该对象设置的具体样式。2，属性和属性值通常以键值对的形式出现3，属性是对指定的对象设置的样式属性，例如字体大小，文本颜色等。4，属性和属性值之间用英文的":"连接5，多个键值对之间用英文的";"来区分总结：css可以把html的内容和结构分开，当你更...
复制链接

扫一扫