Angular笔记8（CSS）

2019-05-14 本文已影响0人刚刚8888

基本格式：

CSS 语法

请注意，当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位，因为 0 就是 0，无论单位是什么。

如果值为若干单词，则要给值加引号：
p {font-family: "sans serif";}

CSS 对大小写不敏感，不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。

//，逗号表示共享属性：
h1,h2,h3,h4,h5,h6 {
  color: green;
  }

//‘ ’ 空格 表示层级属性
aaa bbb{
  color: blue;
}
表示aaa中的bbb元素中元素color为blue

Sans Serif和Serif: Sans Serif字体粗细一致，Serif字体粗细不一致。

根据 CSS，子元素从父元素继承属性，子元素继承不想继承时需要单独设置

通过依据元素在其位置的上下文关系来定义样式的选择器被称为上下文选择器 (contextual selectors)

id 选择器以 "#" 来定义。

.css
#red {color:red;  }

.html
<p id="red">这个段落是红色。</p>

id 属性每个元素只能使用一次

类选择器以一个点号显示

.center {text-align: center}

类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

元素也可以基于它们的类而被选择：

td.fancy {
    color: #f60;
    background: #666;
    }
在上面的例子中，类名为 fancy 的表格单元将是带有灰色背景的橙色。
<td class="fancy">

通过属性选择器对带有指定属性的 HTML 元素设置样式。

下面的例子为带有 title 属性的所有元素设置样式：
[title]
{
color:red;
}

下面的例子为 title="W3School" 的所有元素设置样式：
[title=W3School]
{
border:5px solid blue;
}

下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：
[title~=hello] { color:red; }

下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：
[lang|=en] { color:red; }

属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：
input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}

不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。

优先级排序：
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，优先级从高到低为：
内联样式（在 HTML 元素内部）
内部样式表（位于 <head> 标签内部）
外部样式表
浏览器缺省设置

内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:
<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

外部样式表
每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

属性含义：
背景：
background-color：gray; // 背景色。
background-image: url(/i/eg_bg_04.gif) //背景图
background-repeat: repeat-y; //背景图重复平铺，repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
background-position:center; //背景图位置，top、bottom、left、right 和 center，还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
background-attachment:fixed //背景关联，fixed：相对于可视区是固定的（fixed ），属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。

文本：
text-indent: 5em； //段落的首行缩进 5 em：
text-align:center； //水平对齐，left、right 和 center ，justify（两端对齐）。
word-spacing: 30px; //字间隔
letter-spacing: 20px； //字母间隔
text-transform: uppercase； //字符转换，默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的首字母大写。
text-decoration: none; //文本装饰，underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。
white-space: normal; //处理空白符，normal，pre-line，nowrap，pre，pre-wrap

字体
font-family: Georgia, serif; //声明字体，五种通用字体 Serif 、Sans-serif 、Monospace 、Cursive 、Fantasy ，逗号两种字体的意思是如果用户代理上没有安装 Georgia 字体，就只能使用用户代理的默认字体来显示
font-style:normal; //字体风格，normal - 文本正常显示，italic - 文本斜体显示，oblique - 文本倾斜显示
font-variant:small-caps; //设定小型大写字母。
font-weight:normal; //设置文本的粗细，bold粗体，关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。
font-size:14px; //文字大小

链接
能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。
链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
链接的四种状态：

a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻

text-decoration:none; //文本样式，none：去掉链接中的下划线，underline下划线
background-color:#B2FF99; //规定链接的背景色，

列表
ul {list-style-type : square} //列表类型，声明把无序列表中的列表项标志设置为方块。
ul li {list-style-image : url(xxx.gif)} //列表项图像
ul {list-style-position:inside;} //列表标志位置
li {list-style : url(example.gif) square inside} //简写列表样式

表格
table, th, td {border: 1px solid blue;} //表格边框，例子为 table、th 以及 td 设置了蓝色边框
border-collapse:collapse; //折叠边框
table{width:100%; } //表宽
th{height:50px; } // 行高
td{text-align:right; } //单元格文本水平对齐
td{vertical-align:bottom;} //单元格文本垂直对齐
padding:15px; //内边距
background-color:green; //背景色
color:white; //元素颜色

轮廓
outline:#00ff00 dotted thick; //轮廓
outline-color:#00ff00; //轮廓颜色
outline-style:dotted; //轮廓类型
outline-width:5px; //宽

其他
按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：
h1 {padding: 10px 0.25em 2ex 20%;}
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

position: relative; //相对定位，元素布局位置存在，相对布局位置偏移
position: absolute; //绝对定位，元素布局位置不存在，最近的已定位(非static)祖先元素布局

我们通过 float 属性实现元素的浮动。：float: left;

Angular笔记8（CSS）

猜你喜欢

热点阅读