欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS学习笔记一

程序员文章站 2022-08-03 21:55:20
CSS 选择器: CSS id选择器: id选择器可以为标有特定 id的HTML元素指定特定的样式 id选择器是以 “ ” 来定义的 id选择器常建立 派生选择器 如上,在使用sidebar选择器时,应用在p标签上会使用第一个CSS样式 单独的选择器 id选择器即使不被用来创建 派生选择器,也可以单 ......

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:为文本添加闪烁效果

处理空白符:
  • 文档中对 空格、换行、tab字符的处理

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

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

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

链接样式:

链接的四种状态:
  • 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属性: 设置元素文本和背景颜色
属性 描述
设置是否把表格边框合并为单一的边框。
设置分隔单元格边框的距离。
设置表格标题的位置。
设置是否显示表格中的空单元格。
设置显示单元、行和列的算法。

轮廓样式:

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

  • outline-color属性:设置轮廓的颜色
  • outline-style属性:设置轮廓的样式
  • outline-width属性:设置轮廓的宽度