CSS简介

  • CSS：层叠样式表
  • 作用：HTML网页中的文字大小、颜色、字体，网页的背景颜色、背景图片设置样式。
  • 格式：h1{color:red;font-size:14px;}
  • 选择器 + {}，中间分号隔开
  • CSS由一条条声明语句组成，使用分号隔开
  • 属性值一般不加引号
  • 单位一般为px，像素
  • CSS中不能出现html标签

CSS书写方式

  1. 嵌入式
  2. 外链式
  3. 行内式

嵌入式： 在<head></head>添加style标签，type属性描述这是CSS。



<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Aimer</title>
    <style type="text/css">
        p{
            color: red;
        }
        h1{
            color: blanchedalmond;
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>这个是h1标题</h1>
    <p>这个是段落标签！</p>

</body>
</html>



效果图：




SpannableStringBuilder ClickableSpan去掉下划线_css 字体加粗


外联式：

将CSS代码单独放置在.css文件中，在head标签中通过<link>标签引入链接css文件。


<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Aimer</title>

<!--
    <style type="text/css">
        p{
            color: red;
        }
        h1{
            color: blanchedalmond;
            text-align: center;
        }
    </style>
-->


    <link rel="stylesheet" href="css/css.css" />
</head>

<body>
    <h1>这个是h1标题</h1>
    <p>这个是段落标签！</p>

</body>
</html>


CSS文件：


@charset "utf-8";
/* CSS Document */
h1{text-align: center }


效果图：


SpannableStringBuilder ClickableSpan去掉下划线_css 字体加粗_02


<link rel="stylesheet" href="CSS文件" /> stylesheet： 样式表关系 ； href：

行内式：

使用HTML的style属性和值来进行样式设计。


<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Aimer</title>
</head>

<body>
    <h1 style="color: blue;text-align: center">这个是h1标题</h1>
    <p>这个是段落标签！</p>

</body>
</html>


效果图：


SpannableStringBuilder ClickableSpan去掉下划线_css a标签去掉下划线_03


CSS注释

CSS代码不能包含HTML。


/* CSS Document */


选择器

选择器 | 描述 | 示例 --- | --- | --- 通用选择器 | 给所有标签设置属性 | *{属性：“值”} 标签选择器 | 给指定html标签设置样式 | h1{属性：“值”} 类选择器 | 给指定类名的标签设置样式 | class='test' , .test{属性：值} ID选择器 | 给指定id名的标签设置样式 | id="test1", #test1{属性：值} 还可以将选择器进行组合选择，例如


p.test{
            color: blueviolet;
            text-align: center;
            text-decoration: underline;
        }


SpannableStringBuilder ClickableSpan去掉下划线_css a标签去掉下划线_04


尺寸样式属性

  • width 宽度
  • height 高度
  • background-color 背景颜色

只有块元素可以设置宽度高度，span标签不能设置

文本属性

| 属性 | 值 | 描述| --- | --- | --- color | red 、#f00. | 设置文本的颜色 text-align | none 去掉文本修饰线 ,underline下划线 ,overline上划线 ,line-through删除线 | 设置修饰线条 text-transform | capitalize:首字母大写 ,uppercase小写转大写 ,lowercase大写转小写 | 设置大小写转换 line-height | px | 设置行高,高度与行高就可以设置文本垂直方向居中对齐 text-indent | px 、em | 设置首行缩进 word-spacing | - | 设置单词间距 对英文有效

字体属性

| 属性 | 值 | 描述 --- | --- | --- font-style | normal 正常、italic (斜体) | 设置斜体属性 font-weight | normal 正常、bold 加粗 | 设置字体加粗属性 font-size | px | 设置字体大小 font-family | 微软雅黑、黑体、楷体...... | 设置字体，可以设置多个字体，用逗号隔开，按顺序执行

好了！先到这里做个笔记。