码迷,mamicode.com
首页 > Web开发 > 详细

css 选择器

时间:2019-01-25 21:01:09      阅读:785      评论:0      收藏:0      [点我收藏+]

标签:div   页面   引入   一个   样式   字体   family   back   设置字体   

行内样式<p style=‘color:red‘> hello </p>  不推荐大规模使用

内部标签<head>

        <style>

           p{background-color:red

            }

         </style>

</head>

外部样式  外部样式就是将css写在一个单独的文件中,然后再页面进行引入即可.推荐使用这种方法

<link href=‘css路径‘ rel=‘stylesheet‘  type=‘text/css‘>    #这里面的css路径是和HTML文件一个路径  如果不是  href里面要写上这个css文件的路径

 

 

 

 

基本选择器  元素选择器(标签选择器,  )  p{color:red;}

 

id选择器 

#i1 {   #号表示id属性,后面的i1表示id属性的值
  background-color: red;  #背景色,color:red是字体颜色,这个简单知道一下就行了,明天我们再学这些具体的css样式
}#  最好在css文件里面写

技术分享图片

 

 

类选择器

.c1 {  .表示class属性,c1表示class的值
  font-size: 14px;
}
p.c1 { 找到所有p标签里面含有class属性的值为c1的p标签,注意他俩之间没有空格昂
color: red;
}

技术分享图片

技术分享图片

注意:

      样式类名不要用数字开头(有的浏览器不认)。

      标签中的class属性如果有多个,要用空格分隔。

 


 

技术分享图片

技术分享图片

技术分享图片

 

 

通用选择器  

* {  *表示所有的标签
  color: white;
}



组合选择器
后代选择器
/*li内部的a标签设置字体颜色*/
li a {
  color: green;
}

技术分享图片

技术分享图片

技术分享图片

    儿子选择器(只找儿子)

/*选择所有父级是 <div> 元素的 <p> 元素*/
div>p {
  font-family: "Arial Black", arial-black, cursive;
}

    毗邻选择器

/*选择所有紧接着<div>元素之后的<p>元素*/
div+p {
  margin: 5px;
技术分享图片

css 选择器

标签:div   页面   引入   一个   样式   字体   family   back   设置字体   

原文地址:https://www.cnblogs.com/16795079a/p/10321528.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!