关于css:test

71次阅读

共计 3277 个字符,预计需要花费 9 分钟才能阅读完成。

CSS 属性

1. 通用选择器

(1) 作用:能够抉择到页面中的所有标签

(2) 语法:*{}

(3) 举例:

示例 1:

<body>
<h2> 通用选择器 </h2>
</body>

阐明:应用浏览器控制台,右键查看选项,能够分明地看到标签自带的款式(比方:h2 标签自带 margin)

示例 2:

<head>
<meta charset=”UTF-8″>
<title>Document</title>
<style>

  • {

/ margin: 外边距 /
margin: 0;
/ padding:内填充 /
padding: 0;
}
</style>
</head>
<body>
<h2> 通用选择器 </h2>
<span>span 标签 </span>
<div>div 标签 </div>
<ul>
<li> 哈哈 </li>
<li> 哈哈 </li>
</ul>
</body>

后果:

阐明:如后果所示, h2 自带的 margin 曾经被去掉,无序列表自带的点也被去掉了。

论断:

  • 个别应用 *{margin:0;padding:0} 去掉所有标签自带的款式
  • div 和 span 标签

    • div 标签:划分网页的板块
    • span 标签:用来选中文本设置款式

      留神:div 和 span 都是不带任何自带款式,是最洁净的标签。

      区别:div 独占一行,span 在同一行显示

2. 后辈选择器

(1)语法:选择器 选择器{}

(2)特点:

  • 选择器与选择器之间用 空格隔开
  • 选择器和选择器之间 必须是后辈(标签的嵌套)关系
  • 选择器的类型不固定(标签 /id/ 类选择器等等都能够)
  • 选择器之间是 能够跨代 的(只有是先人和后辈的关系即可)
  • 选择器的个数个别也不限度

(3)举例:为前两个字设置红色字体

<head>
<meta charset=”UTF-8″>
<title>Document</title>
<style>
.box span {
color: red;
}
</style>
</head>
<body>
<ul class=’box’>
<li>
<span> 哈哈 </span> 哈
</li>
</ul>
</body>

后果:

阐明:除了间接应用 span 标签选择器外,span 是 li 和 ul 的后辈元素,所以能够通过为 ul 或者 li 设置 class 属性,应用后辈选择器(如.box span)抉择。

3. 选择器的权重

(1)概念:通过不同的选择器,抉择同一个标签,设置了雷同的属性,然而设置了不同的属性值,则会 产生抵触

(2)权重值

  • 行内款式 1000
  • id 选择器 100
  • class 选择器和伪类选择器 10
  • 标签选择器 1
  • 继承的优先级最低

(3)优先级的规定

  • 当权重值雷同的时候,依据就近准则
  • 权重值越高,越优先显示
  • 后辈选择器 的权重值是所有选择器的权重值 相加 之和
  • 自带款式的标签,须要间接批改本人自身

    示例 1:

    <head>
    <meta charset=”UTF-8″>
    <title>Document</title>
    <style>
    p {
    color: red;
    }
    </style>
    </head>
    <body>
    <p> 我是段落标签
    <span> 我是 span</span>
    </p>
    </body>

    后果:

    示例 2:

    <head>
    <meta charset=”UTF-8″>
    <style>
    p {
    color: red;
    }
    </style>
    </head>
    <body>
    <p>
    超链接
    </p>
    </body>

    后果:

    阐明:比拟示例 1 和示例 2,咱们能够看到,span/ a 标签的字体应该从父元素 p 继承而来,然而示例 2 的后果并未扭转 a 的字体色彩。

    示例 3:

    <head>
    <meta charset=”UTF-8″>
    <title>Document</title>
    <style>
    a {
    color: red;
    }
    </style>
    </head>
    <body>
    <p> 我是段落标签
    超链接
    </p>
    </body>

    后果:

    论断:对于自带款式的标签(a 标签),须要间接批改本人自身

4. 群组选择器

  • 语法:选择器,选择器{}
  • 规定:选择器的个数和类型不限度
  • 特点:

    • 将有公共款式的选择器放到一组,用逗号隔开
    • 群组选择器的权重值是 每个选择器本人自身,和其余选择器无关

      示例:

      <head>
      <meta charset=”UTF-8″>
      <title>Document</title>
      <style>
      .box {
      color: blue;
      }

      #un,p {
      color: red;
      }
      </style>

      </head>

      <body>
      <div id=’un’> 我是 div 标签 </div>
      <p class=’box’> 我是段落标签 </p>
      </body>

      后果:

      阐明:因为群组选择器的权重只与本人自身无关,所以标签(p)的权重值 1,class 类(.box)的权重值为 10,则显示类选择器设置的蓝色。

5. 字体属性

(1)字体大小
  • 属性:font-size
  • 属性值:

    • 数值 +px; 个别数值设置为偶数
(2)字体类型
  • 属性:font-family
  • 属性值

    • 中文要加引号
    • 英文一个单词的能够不加引号,多个单词组成的字体类型须要设置引号
    • 多个字体之间用逗号隔开,从左向右检索,零碎有该字体则间接显示,没有则显示默认字体

      <style>
      p {
      font-family: ‘ 宋体 ’,Arial, ‘Times New Roman’;
      }
      </style>

(3)字体加粗
  • 属性:font-weight
  • 属性值:

    • bold 加粗
    • normal 去掉加粗
(4)字体歪斜
  • 属性:font-style
  • 属性值:

    • italic 歪斜
    • normal 去掉歪斜

6. 文本属性

(1)ps 快捷键
  • 放大 / 放大 alt+ 滚轮
  • 显示 / 暗藏标尺 ctr+r
  • 批改像素单位 ctr+k-> 单位与标尺 -> 标尺单位抉择像素 -> 显示信息面板窗口 -> 信息勾选就行
(2)文本色彩
  • 属性:color
  • 属性值(三种形式)

    • 英文单词
    • 十六进制
    • rgb(r,g,b) rgb 的取值 0 -255
(3)文本对齐形式
  • 属性:text-align
  • 属性值

    • left(居左,默认值)
    • right (居右)
    • center(居中)
    • justify (两端对齐)
(4)文本润饰
  • 属性:text-decoration
  • 属性值:

    • underline (下划线)
    • overline (上划线)
    • line-through (删除线)
    • none (去掉下划线)
(5)文本缩进
  • 属性:text-indent
  • 属性值

    • 数值 +px/ 数值 +em(以后字体大小的倍数,个别设置 2em)
    • 能够设置正数
(6)文本大小写转换
  • 属性:text-transform
  • 属性值:

    • capitalize 全副首字母大写
    • uppercase 全副大写
    • lowercase 全副小写
    • none
(7)文本行高
  • 属性:line-height
  • 属性值:数值 +px
  • 利用:

    • 多行文本:加大行与行之间的间隔
    • 单行文本:实现单行文本的 垂直居中
  • 量取:从某一行的头量到下一行的头
(8)字间距
  • 属性:letter-spacing

    • 中文:每个汉字之间的间隔
    • 英文:每个字母之间的间隔
(9)词间距
  • 属性:word-spacing
  • 英文单词之间的间隔
(10)字体复合写法
  • font: 字体加粗 字体歪斜 字体大小 / 行高 字体类型

    • 字体加粗 字体歪斜两者有值间接写,没有能够省略
    • 字体大小 / 行高 字体类型 三者不能够省略,并且程序不能变

7. 堆色块

(1)先用标尺拉出版心的范畴

(2)从上往下写板块,剖析板块

  • 版心之外没有色彩,只写一个 div,代表版心。设置宽 / 高 / 背景色 / 居中
  • 版心之外有色彩,写两个 div。

    • 外层是通栏,设置高度 / 背景色
    • 里层是版心,设置宽 / 高 / 背景色 / 居中

小结:

1. 选择器:
  • 通用选择器 星号*
  • 后辈选择器 选择器之间 空格 连贯 / 权重为所有之和
  • 群组选择器 选择器之间 逗号 连贯 / 权重只与本人自身无关
  • 权重:

    • 1) 行内 1000
    • 2) id 100
    • 3) 类和伪类 10
    • 4) 标签 1
    • 5) 继承权重最低
2. 字体属性
  • 字体大小 font-size
  • 字体类型 font-family
  • 字体加粗 font-weight
  • 字体歪斜 font-style
3. 文本属性
  • 文本色彩 color
  • 文本对齐形式 text-align(四类)
  • 文本润饰 text-decoration(四类)
  • 文本缩进 text-indent
  • 文本大小写转换 text-transform
  • 文本行高 line-height
  • 字间距 letter-spacing
  • 词间距 word-spacing
  • 复合写法:

    • font: 字体加粗 字体歪斜 字体大小 / 行高 字体类型(前两个没有可省略,后三个不能省,且程序不能变)

正文完
 0