• CSS学习笔记一

    CSS 选择器：

    CSS id选择器：

    • id选择器可以为标有特定 id的HTML元素指定特定的样式

    • id选择器是以 “#” 来定义的

    <!DOCTYPE html>
<html>
<head>
	<title>Node</title>
	<style type="text/css">
		#red {color: red;}
		#green {color: green;}
	</style>
</head>
<body>
	<p id="red">id选择器：red -- 红色</p>
	<p id="green">id选择器：green -- 绿色</p>
</body>
</html>
    • id选择器常建立派生选择器
    #sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
}

    #sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

    如上，在使用sidebar选择器时，应用在p标签上会使用第一个CSS样式

    • 单独的选择器

    id选择器即使不被用来创建 派生选择器，也可以单独使用

    #sidebar {
	border: 1px dottde #00;
	padding:10px;
}

    CSS 类选择器：

    • 类选择器以一个点号定义
    .center{text-align:center;}

    <h1 class="center">
    Hello!
</h1>
    • 和id选择器一样，class也可以被用作派生选择器
    .fancy td {
	color: #f60;
	background:#666;
}

    CSS 属性选择器：

    • 为所有title属性的所有元素设置样式：
    [title]
{
	color:red;
}

    CSS 创建：

    外部样式表：

    • 每一个页面可以使用< link >标签链接到样式表文件（位于文档头部）
    <head>
    <link rel="stylesheet" type="text/css" href="*.css" />
</head>

    内部样式表：

    • 在文档头部的< style >标签中定义内部样式表
    <head>
    <style type="text/css">
        hr {color: sienna;}
        #nu {color: ber;}
        .nm {color:bre;}
    </style>
</head>

    内联样式表：

    • 和标签叠在一起，用 “style”属性表示设置css样式
    <p style="color:bre">
    Hello！
</p>

    如果一个元素拥有多个CSS选择器，会按照内部 -->外部的次序进行设置渲染 -

    CSS 样式：

    背景样式：

    背景色：
    • background-color属性： 设置背景色，接受任何颜色值
    背景图像：

    • background-image属性：设置背景图像（url图像相对位置）

    • background-repeat属性：设置背景无限平铺

    • background-position属性：背景定位（居左，居中，居右）

    • 关键字：

      图像防止的关键字，作用就是可以简单明了；

      关键字 等价和含义
      center 中心居中
      top 顶部居中
      bottom 底部居中
      right 右侧居中
      left 左侧居中

    • 百分数值：

      （左上角）百分数值同时应用于元素和图像

    • 长度值：

      元素内边距左上角的偏移

    背景关联：
    • background-attachment属性：页面向下滚动时，背景也会一起滚动

    文本样式：

    缩进文本：
    • text-indent属性： 实现文本缩进，属性值是px/em/负值/百分 数
    水平对齐：

    • text-align属性： 实现文本的对齐方式

      left：左对齐

      right：右对齐

      center：居中（和< CENTER >标签不同，后者是对元素操作，而前者只对文本有效）

      justify“：两端对齐

    字间隔：

    • word-spacing属性： 可以改变字或单词之间的标准间隔，默认（normal）为 0

      正数值：加大间隔

      负数值：缩小间隔

    字符转换：

    • text-transform属性： 处理文本的大小写

      none：不进行操作

      uppercase：全大写

      lowercase：全小写

      capitalize：首字母大写

    文本装饰：

    • text-decoration属性：

      none：无

      underline：为元素添加下划线

      overline：为文本顶端添加上划线

      line-through：为文本添加删除线

      blink：为文本添加闪烁效果

    处理空白符：

    下面的表格总结了 white-space 属性的行为：

    值 空白符 换行符 自动换行
    pre-line 合并 保留 允许
    normal 合并 忽略 允许
    nowrap 合并 忽略 不允许
    pre 保留 保留 不允许
    pre-wrap 保留 保留 允许
    文本方向：
    • direction属性： 块级元素中的文本书写方向，表中列布局的方向……
    • unicode-bidi属性：行内元素
    文本属性：
    属性 描述
    color 设置文本颜色
    direction 设置文本方向。
    line-height 设置行高。
    letter-spacing 设置字符间距。
    text-align 对齐元素中的文本。
    text-decoration 向文本添加修饰。
    text-indent 缩进元素中文本的首行。
    text-shadow 设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
    text-transform 控制元素中的字母。
    unicode-bidi 设置文本方向。
    white-space 设置元素中空白的处理方式。
    word-spacing 设置字间距。

    字体样式：

    字体属性
    属性 描述
    font 简写属性。作用是把所有针对字体的属性设置在一个声明中。
    font-family 设置字体系列。
    font-size 设置字体的尺寸。
    font-size-adjust 当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）
    font-stretch 对字体进行水平拉伸。（CSS2.1 已删除该属性。）
    font-style 设置字体风格。
    font-variant 以小型大写字体或者正常字体显示文本。
    font-weight 设置字体的粗细。

    链接样式：

    链接的四种状态：
    • a:link 普通的，未被访问的链接
    • a:visited 用户已访问的链接
    • a:hover 鼠标指针位于链接上方
    • a:active 链接被点击时刻
    文本修饰：
    • text-decoration属性：常用于去掉链接中的下划线

    列表样式：

    列表类型：

    ​ 影响列表的样式，最简单的方法就是改变其标志类型

    列表项标记：
    列表项图像：
    列表标志位置：
    简写列表样式：

    表格样式：

    表格边框：
    • border属性： 设置表格的边框样式（双线框）
    • border-collapse属性：将双线框折叠为单线框
    宽度和高度：
    • width属性： 设置宽度
    • height属性： 设置高度
    表格对齐：

    • text-align属性： （水平对齐）

      left：左对齐

      right：右对齐

      center：居中（和< CENTER >标签不同，后者是对元素操作，而前者只对文本有效）

      justify“：两端对齐

    • vertical-align属性： （垂直对齐）

    表格内边距：
    • padding属性： 可以设置 , 元素标签的内边距
    表格颜色：
    • border属性： 设置元素文本和背景颜色
    属性 描述
    border-collapse 设置是否把表格边框合并为单一的边框。
    border-spacing 设置分隔单元格边框的距离。
    caption-side 设置表格标题的位置。
    empty-cells 设置是否显示表格中的空单元格。
    table-layout 设置显示单元、行和列的算法。

    轮廓样式：

    • outline属性：在元素周围绘制一条线

    • outline-color属性：设置轮廓的颜色

    • outline-style属性：设置轮廓的样式

    • outline-width属性：设置轮廓的宽度
  • 相关阅读:
    node异步转同步（循环）
    三级省市区PCASClass.js插件
    微信公众号基础总结（待更新）
    ES6详解
    webpack配置
    高性能 CSS3 动画
    github上传口令
    纯css3 实现3D轮播图
    优美的js代码，拿去玩~
    关于列举属性用点还是用【】
  • 原文地址：https://www.cnblogs.com/wangyuyang1016/p/11440892.html
Copyright © 2020-2023  润新知