会飞的鱼

2020
Godam
首页 » 读书笔记 » Day 01 CSS 学习笔记

Day 01 CSS 学习笔记


1.CSS选择器

1.1 id选择器

    id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。以下的样式规则应用于元素属性 id="para1":

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

1.2 Class选择器

    class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示,在以下的例子中,所有拥有 center 类的 HTML 元素均为居中。

.center {text-align:center;}
你也可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:
<style>
.value{
  text-align:center;
}
</style>
<!--下面的文字是居中对齐的-->
<p class="value">center text</p>
1.3 元素选择器

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

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

1.4 包含选择器

    指定目标选择器必须处在某个选择器对应的元素内部,语法格式: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>


    包含选择器除了有 A B{...} 的形式外(A和B都是标签),还可以有这种形式:.A B{...} 的形式(A是类名,B是标签)。作用与上面介绍的相同,会使 class 名为 A 的标签里面所有名为 B 的子代标签的内容按照设定的内容显示。

<style>
.first span{
  color:red;
}
</style>
<body>
<p class="first"><span>内容为红色</span>
<ol>
  <li><span>内容也是红色</span></li>
  <li><span>内容也是红色</span></li>
</ol></p>

</body>

1.5 子选择器

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

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

    子选择器除了有 A >B{...} 的形式外(A和B都是标签),还可以有这种形式:.A >B{...} 的形式(A是类名,B是标签)。作用与上面介绍的相同,会使 class 为 A 的标签里面所有名为 B 的直接子代标签的内容按照设定的内容显示。而非直接子代的 B 标签的内容是不会改变的。

<style>
.first>span{
  color:red;
}
</style>
<body>
<p class="first"><span>内容为红色</span>
<ol>
  <li><span>内容不是红色</span></li>
  <li><span>内容不是红色</span></li>
</ol></p>

</body>


1.6 兄弟选择器

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>

1.7 相邻选择器

    语法形式为:
A+B{
    声明1; 
    声明;
    ...
}

<!--相邻选择器选择每个div紧邻后的一个元素p-->
<style>
   div+p{
     color: red;
   }
</style>
<div>
   <p>not red text</p>
   <p>not red text</p>
</div>
<p>red text</p>
<p>not red text</p>

2.CSS列表

    列表 -简写属性

    可以按顺序设置如下属性:
    list-style-type
    list-style-position (有关说明,请参见下面的CSS属性表)
    list-style-image
    如果上述值丢失一个,其余仍在指定的顺序,就没关系。

ul
{
    list-style: square url("sqpurple.gif");
}

78375860_p0.png

文章如无特别注明均为原创! 作者: 果果, 转载或复制请以 超链接形式 并注明出处 GODAM|博客|godam
原文地址《 Day 01 CSS 学习笔记》发布于2020-2-14

分享到:
打赏

评论

游客

切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

sitemap