CSS菜鸟教程阅读笔记

作者: 一只神奇的小绵羊 | 来源:发表于2018-03-13 17:00 被阅读0次

CSS菜鸟教程阅读笔记
Typescript
你要用的各种前端网站
CSS id选择器 class 选择器
Golang菜鸟教程-学习笔记-2019.1.27
CSS 3 流水账
2019-02-17
前端开发文档--自用
前端学习网站大全1
2018-04-10前端学习笔记

一. 选择器

下列选择器列表优先级逐级增加：
通用选择器（*）
元素选择器
类选择器
属性选择器
伪类
ID 选择器
内联样式

1. id 选择器

ID 选择器（ID selector，IS）：使用 # 标识，语法格式：#S{...}（S为选择器名）。例：id为name的标签会匹配下面的样式

<style>
#name{
  color:red;
}
</style>
<!--下面文字是红色的-->
<p id="name">red text</p>

2. 类选择器

类选择器（class selector，CS）：使用 . 标识，语法格式：.S{...}（S为选择器名）。例：class属性值为value的标签会匹配下面的样式

<style>
.value{
  text-align:center;
}
</style>
<!--下面的文字是居中对齐的-->
<p class="value">center text</p>

或者可以这样写以指定特定的HTML元素使用class：

p.center {text-align:center;}
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p>

3. 标签选择器

标签选择器（element selector，ES）：又叫元素选择器，使用标签名作为selector名，语法格式：S{...}（S为选择器名）。例：所有的p标签都会匹配以下的样式

<style>
p{
  font-style:italic;
}
</style>
<!--下面的文字是斜体的-->
<p style="font-style:italic">italic text</p>

4.属性选择器

属性选择器（attribute selector，AS）：ES其实是AS的一个特例，在AS基础上还能对selector描述得更具体，语法格式为 E[attr[~=][|=][^=][$=][*=]VALUE]{...}，是并没有得到所有浏览器支持的选择器，因此不举例

5. 包含选择器

包含选择器（package selector，PS）：指定目标选择器必须处在某个选择器对应的元素内部，语法格式：A B{...}（A、B为HTML元素/标签，表示对处于A中的B标签有效）。例：以下div内的p标签和div外的p标签分别匹配不同的样式

<style>
p{
  color:red;
}
div p{
  color:yellow;
}
</style>
<p>red text</p><!--文字是红色的-->
<div>
  <p>yellow text</p><!--文字是黄色的-->
</div>

6. 子选择器

子选择器（sub-selector，SS）：类似于包含选择器，指定目标选择器必须处在某个选择器对应的元素内部，两者区别在于PS允许"子标签"甚至"孙子标签"及嵌套更深的标签匹配相应的样式，而SS强制指定目标选择器作为包含选择器对应的标签内部的标签，语法格式：A>B{...}（A、B为HTML元素/标签）。例：以下div内的p标签匹配样式，div内的table内的p不匹配

<style>
div>p{
  color:red;
}
</style>
<div>
  <p>red text</p><!--文字是红色的-->
  <table>
    <tr>
      <td>
        <p>no red text;</p><!--文字是非红色的-->
      </td>
    </tr>
  </table>
</div>

7. 兄弟选择器

兄弟选择器（brother selector，BS）：BS是CSS3.0新增的一个选择器，语法格式：A~B{...}（A、B为HTML元素/标签，表示A标签匹配selector的A，B标签匹配selector的B时，B标签匹配样式）

<style>
div~p{
  color:red;
}
</style>
<div>
  <p>no red text</p><!--文字是非红色的-->
  <div>no red text</div>
  <p>red text</p><!--文字是红色的-->
</div>

二. 样式表

插入样式表的方法有三种:

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)

优先级如下：
（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

1. 外部样式表
——外部定义导入使用
使用如下：

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

存储如下：

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

2. 内部样式表
——<style>定义内部使用

<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>

3. 内联样式
——行内定义混合使用

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

注：
1.不要在属性值与单位之间留有空格（如："margin-left: 20 px" ），正确的写法是 "margin-left: 20px"
2.如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。如下：
<head>
   
   <link rel="stylesheet" type="text/css" href="style.css"/>
   
   <style type="text/css">
     /* 内部样式 */
     h3{color:green;}
   </style>
</head>
<body>
   <h3>测试！</h3>
</body>

三. 背景

当使用简写属性时，属性值的顺序为：

background-color（背景颜色）
background-image（背景图片）
background-repeat（背景图片是否平铺）
background-attachment（背景图像是否固定）
background-position（图片位置）

如下所示：

  body {background: #ffffff  url('img_tree.png')  no-repeat  right  top;}

CSS 背景属性

Property	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

四. 文本

1. 颜色：

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: redbody {color:red;}

示例如下：

h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
或
<span style="color:#FFF"  />

2. 对齐方式
有居中、对齐到左或右、两端对齐三种方式，示例如下：

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（比如杂志和报纸的排版）。

3. 文本缩进
指定文本的第一行的缩进
p {text-indent:50px;}

所有CSS文本属性

属性	描述
color	设置文本颜色
direction	设置文本方向。
letter-spacing	设置字符间距
line-height	设置行高
text-align	对齐元素中的文本
text-decoration	向文本添加修饰
text-indent	缩进元素中文本的首行
text-shadow	设置文本阴影
text-transform	控制元素中的字母
unicode-bidi	设置或返回文本是否被重写
vertical-align	设置元素的垂直对齐
white-space	设置元素中空白的处理方式
word-spacing	设置字间距

五. 字体

1. 字体系列
为了严谨，font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

p{font-family:"微软雅黑", Times, serif;}

2. 字体样式

p.normal {font-style:normal;}//正常
p.italic {font-style:italic;}//斜体

3. 字体大小

能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。
请务必使用正确的HTML标签，例如<h1> - <h6>表示标题和<p>表示段落：
字体大小的值可以是绝对或相对的大小。

绝对大小：

设置一个指定大小的文本
不允许用户在所有浏览器中改变文本大小
确定了输出的物理尺寸时绝对大小很有用

相对大小：

相对于周围的元素来设置大小
允许用户在浏览器中改变文字大小
另外，虽然可以通过浏览器的缩放工具调整文本大小，但是，这种调整是整个页面，而不仅仅是文本

注：如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）

示例如下：

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

所有CSS字体属性

Property	描述
font	在一个声明中设置所有的字体属性
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	指定字体的粗细。

六. 链接

链接样式：

a:link {background-color:#B2FF99;}//- 正常，未访问过的链接
a:visited {background-color:#FFFF85;}/用户已访问过的链接
a:hover {background-color:#FF704D;}//当用户鼠标放在链接上时
a:active {background-color:#FF704D;}//链接被点击的那一刻

删除下划线：

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

背景颜色

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

七. 列表样式

所有属性：

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image	将图象设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。

八. 表格

1. 使用下列方式添加单一框线的表格

table, td, th{  
    border: 1px solid black;
    border-collapse: collapse;
}

2. 表格宽度和高度

table 
{  width:100%;height:50px;  }

3. 文字对齐

td.a
{  text-align:right;  }/*水平对齐*/
td.b
{  height:50px;
vertical-align:bottom;  }/*垂直对齐*/

九. 盒子模型

a.png

网友评论

本文标题：CSS菜鸟教程阅读笔记

本文链接：https://www.haomeiwen.com/subject/wglofftx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！