Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二

简介: Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二

Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一:https://developer.aliyun.com/article/1530973

字体属性

color

规定文本的颜色

<style>
    div{
        color:rgba(255,0,0,.5);  <!-- .5修改字体的透明度-->
    }
</style>

font-size

设置文本的大小

chrome浏览器接受的最小字体大小是12px。

font-weight

设置文本的粗细

bold:粗体

bolder:更粗

lighter:更细

100-900:任意定义,400等同于默认,700等同于bold。

font-style

指定文本的字体样式

描述
normal 默认值
italic 定义斜体字

font-family

font-family属性指定一个元素的字体

每个值用逗号分开。

如果字体名称包含空格,则必须加上引号。

font-family:"Microsoft YaHei","Simsun","SiHei";

背景属性

CSS背景属性 主要有以下几个: image.png

background-color

该属性设置背景颜色

<head>
<style>
 
  .box{
    width:300px;
    height:300px;
    background-color:palevioletred;
  }
 
</style>
</head>
<body>
  <div class="box"></div>
</body>

background-image

设置元素的背景图像。

元素的背景时元素的总大小,包括填充和边界(不包括外边距)。 默认情况下background-image属性放置在元素的左上角,如果图像不够大的话会在垂直和水平方向平铺图像,如果图像大小超过元素大小,从图像的左上角开始显示元素大小的那部分。

background-repeat

该属性设置如何平铺背景图像

说明
repeat 默认值
repeat-x 只向水平方向平铺
repeat-y 只向垂直方向平铺
no-repeat 不平铺

background-size

该属性设置背景图像的大小

image.png

文本属性

text-align

指定元素文本的水平对齐方式

描述
left 文本居左排列,默认值
right 把文本排列到右边
center 把文本排列到中间

text-decoration

text-decoration属性规定添加到文本的修饰,下划线、上划线、删除线等。

描述
underline 定义下划线
overline 定义上划线
line-through 定义删除线

text-transform

text-transform属性控制文本的大小写

描述
captialize 定义每个单词开头大写
uppercase 定义全部大写字母
lowercase 定义全部小写字母

text-indent

text-indent属性规定文本块中首行文本的缩进。

p{
    text-indent:2em;  <!-- 首行缩进2个字节-->
}
 
<!-- 或者用px(像素)来定义-->
p{
    text-indent:50px;
}

注意:负值时允许的。如果是负数,将第一行左缩进。

表格属性

表格边框

指定CSS表格边框,使用border属性。

<style>
    table,td{
        border:1px solid black;
    }
</style>

折叠边框

border-collapse属性设置表格的边框是否被折叠成一个单一的边框或隔开。

表格宽度和高度

width和height属性定义表格的宽度和高度。

表格文字对齐

表格中的文本对齐和垂直对齐属性。

text-align属性设置水平对齐方式,向左,右,或中心。

<style>
    td{
        text-align:center;
    }
</style>

垂直对齐属性设置垂直对齐

<style>
    td{
        height:50px;
        vertical-align:bottom;
    }
</style>

表格填充

如果在表的内容中控制空格之间的边框,应使用td和th元素的填充属性

<style>
    td{
        padding:15px;
    }
</style>

表格颜色

<style>
    table,td,th{
        border:1px solid green;
    }
    td{
        background-color:green;
        color:white;
    }
</style>

关系选择器

关系选择器分类:

1.后代选择器

2.子代选择器

3.相邻兄弟选择器

4.通用兄弟选择器

后代选择器

定义

选择所有被E元素包含的F元素,中间用空格隔开。

语法

<head>
<style>
  ul li{
    color:green;
  }
</style>
</head>
 
<body>
  <ul>
      <li>后代选择器</li>
        <li>子代选择器</li>
    </ul>
    <ol>
      <li>没有绿色文本的效果</li>
    </ol>
</body>

子代选择器

定义

选择所有作为E元素的直接子元素F,对更深一层的元素不起作用,用>表示。

语法

<head>
<style>
  div>a{
    color:red;
  }
</style>
</head>
 
<body>
  <div>
        <a href="">子元素1</a>
        <p><a href="">孙元素</a></p>
        <a href="">子元素2</a>
    </div>
</body>

相邻兄弟选择器

定义

选择紧跟E元素后的F元素,用加号表示,选择相邻的第一个兄弟元素。(使用率不高)

语法

<head>
<style>
 
  h1+p{
    color: red;
    text-align: center;
  }
 
</style>
</head>
<body>
 
  <h1>标题一</h1>
  <p>这是一个段落。</p>
 
</body>

通用兄弟选择器

定义

选择E元素之后的所有兄弟元素F,作用于多个元素,用~隔开。

语法

<head>
<style>
 
  h1~p{
    color: red;
    text-align: center;
  }
 
</style>
</head>
<body>
 
  <h1>标题一</h1>
  <p>这是第一个段落。</p>
  <p>这是第二个段落。</p>
</body>


end

目录
相关文章
|
21天前
HTML中的<iframe>标签及其属性
HTML中的<iframe>标签及其属性
26 5
|
11天前
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
23 0
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
|
20天前
|
JavaScript 前端开发 UED
获取HTML元素的offsetParent属性
获取HTML元素的offsetParent属性
|
17天前
|
JavaScript 前端开发 Java
获取HTML元素的scrollHeight属性
获取HTML元素的scrollHeight属性
|
18天前
|
JavaScript 前端开发 UED
获取HTML元素的offsetParent属性
获取HTML元素的offsetParent属性
|
19天前
HTML 链接- id 属性
【7月更文挑战第1天】HTML 链接- id 属性。
19 1
|
21天前
|
前端开发 JavaScript
HTML 全局属性介绍及示例
HTML 全局属性介绍及示例
14 2
|
21天前
|
Web App开发 移动开发 搜索推荐
HTML <meta> 标签及其属性介绍
HTML <meta> 标签及其属性介绍
25 1
|
22天前
|
资源调度 前端开发 JavaScript
web实现酷炫的canvas粒子动画背景
web实现酷炫的canvas粒子动画背景
12 0
|
24天前
|
Web App开发 移动开发 搜索推荐
HTML5 新增语义标签及属性
HTML5 新增语义标签及属性