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 左侧居中
百分数值：

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

元素内边距左上角的偏移

关键字	等价和含义
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属性：设置轮廓的宽度

上一篇：正确认识埋线减肥,是否会有副作用

下一篇：女性朋友抗衰老的秘密常刮三个黄金穴位