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

前端-css

时间:2019-08-05 19:07:18      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:com   结束   方式   span   层叠样   radius   ora   convert   元素   

CSS介绍

CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。

当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染)。

参考博客:https://www.cnblogs.com/liwenzhou/p/7999532.html

CSS实例

每个CSS样式由两个组成部分:选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

 

技术图片

注释:

/*这是注释*/

行内样式

<p style="color: red">Hello world.</p>

内部样式

嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下:

 

head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

 

外部样式

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

 

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

 

CSS选择器

1. 基本选择器
    1. 标签选择器  p   适用于 批量的\统一\默认的样式
    2. ID选择器 #i1      适用于 给特定标签设置特定样式
    3. 类选择器  .c1     适用于 给某一些标签设置相同的样式

特殊的:     

2. 通用选择器   用于整个网站的设置,    

      

* {
  color: white;
}

      

 3. 组合选择器   

    1. 后代选择器 #d1 p { color : red ;} 在id为d1 的p标签的后代     

   2. 儿子选择器 #d1  >p { color:greep;}     

    3. 毗邻选择器  div+p { }   找p标签,p 标签挨着一个同级的div

      4. 弟弟选择器 div ~p  {}   div下的所有同级p标签        

4. 属性选择器 : 表示标签有某种属性时     

    1. [s9]   以s9  为属性的标签  [s9]  {color : red;}    <p  s9=‘hao‘> 我是一个标签</p>    

     2. [s9="hao"]

5. 分组和嵌套
    1. div,p  {color:red;}    将div,p标签同时改为红色,别忘了逗号分隔
    且套
    #d1 + p  {}

 样式文件优先级(很多选择器可以取用,)
   1. 内联样式(直接在标签里面写style) 优先级最高 <p  style=‘color:red‘>  </p>
   2.选择器都一样的情况下,谁靠近标签谁就生效,从上到下优先生效
   3. 选择器不同时 计算权重来判断 id选择器 比 标签选择器高
   内联样式1000  》  id选择器100 >  类选择器 10  > 元素选择器1  

 

前端-css

标签:com   结束   方式   span   层叠样   radius   ora   convert   元素   

原文地址:https://www.cnblogs.com/huxl1/p/11304750.html

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