CSS 笔记1 css选择器

CSS全称是Cascading Style Sheet,层叠样式表。用于控制页面样式与布局,并允许样式信息与网页内容相分离的一种标记性语言。

引入CSS方法

1.内联引入方法:直接在HTML标签内添加样式

<p style="color:red;">改变字体颜色</p>

 

2.内部引入方法

在HTML 中添加style样式

  <style>

  p{

    color:red;

    font-size:20px;

     }

  </style>

 

3.外部引入方法

在HTML文档外部新建一个以.css为后缀名的CSS样式表,在HTML文档的<head>部分以<link type="text/css" rel="stylesheet" href="url">标签进行引入

 

三大选择器:元素选择器、类选择器、ID选择器

1.元素选择器是针对标签元素如:p、a、ul等标签设置的样式,直接以标签名字定义

  如:p{ color : red;}

2.类选择器是针对不同元素需要使用相同样式时的一种样式设置方法,以 点+类名 定义

 如:.myText{ color : red;}    调用时:<p class="myText">文字</p>

3.ID选择器是针对某个需要单独操作的标签进行的样式设置方法,ID属性值是唯一的。以 #+ID名 定义

 如:#myText{ color : red;}   调用时:<p id="myText" >文字<p>

 

其他选择器:集体选择器、属性选择器、后代选择器

1.集体选择器:当多个元素都采用同一种样式属性的时候,用集体选择器就会方便很多,元素之间用逗号隔开

  li,.mytext,span,a{ color : red; }

2.属性选择器:可以根据元素的属性和属性值来设置样式。

  img[alt]{ border : 3px; }   所有拥有alt属性的img标签都有3个像素宽的边框

  img[alt="image"]{ border : 5px; }   对alt属性的值为image的元素重新设置了样式,设置它的边框为5个像素

3.后代选择器:又叫包含选择器,可以用于作为某元素后代的元素。

  h1 em{ color : red; }    只对h1元素中的em元素应用样式

  div .sidebar{ color : red; }  对div中类名为 sidebar 的元素应用样式,可以好多层套下去

 4.子元素选择器:只能选择作为某元素子元素的元素。

  如:h1 > strong{ color : red; }   以下第一个子级会变颜色,第二个不会

  <h1>这是<strong>子级</strong>关系</h1>

  <h1>这是<em>子级和<strong>后代</strong></strong></em>关系<h1>

5.相邻兄弟选择器:可选择紧接在另一元素后的元素,且二者具有相同的父元素。

  h1+p{ color : red; }   选择紧接在h1元素后出现的段落,h1和p元素拥有共同的元素

 

<style>

  html>body div+span,html>body hr+ul li{ color : red; }

</style>

  从<html>元素中找到一个叫做<body>的子元素,并且在<body>元素中找到所有后代为<div>的元素,接着从<div>元素的同级后面找到元素名为<span>的元素,第二个选择器声明解释相同。

<style>

posted on 2018-08-23 18:27  阳光旅人  阅读(144)  评论(0编辑  收藏  举报

导航