css讲解

首先在我们学习css之前先来思考一个问题，为什么html标签上不直接改变样式，而要将文档结构和样式分离，分别用html和css来表示呢?

其实我个人认为这样分离带来的好处明显，我总结了几点：

1. 可以实现样式重用，提高了工作效率。

2. 可以更加细致的分工开发。

3. 使文件结构变的更加清晰。

1:css语法

CSS规则由两个主要的部分构成：选择器以及一条或多条声明，即：选择器{属性:值;属性:值;…. }

请注意：

将所有声明放到{ }中

每条声明由三部分组成——属性:值

声明以;结束

2：css常见属性

字符颜色

color:red;

字号大小

font-size:40px;

背景颜色

background-color:blue;

宽度

Width:10px;

长度

Height:40px;

背景图片

background-image:url(“1.png”);

文字居中

text-align:center;left|right;

行高

line-height

加粗

font-weight:bold;

不加粗

font-weight:normal;

斜体

font-style:italic;

不斜体

font-style:normal;

下划线

text-decoration:underline;

没有下划线

text-decoration:normal

首行缩进

Text-indent：2em;

在使用background-image属性时请注意：一定要设置其宽和高，例如：

width: 50px;

height: 90px;

background-image: url("x.jpg");

还有之前在html中标签设置背景图片使用：background，同时可以不用放在style中，而这里css是background-image；注意区分。

同时要知道：浏览器默认文字大小为16px，默认行高(line-height)为18px

3：css写法

在这里写3中常见的css写法：

（1）第一种：内嵌式写法

 1 <head>

 2     <style type="text/css">

 3     /*此处为CSS代码----在该写法中，可以将CSS样式写在<head></head>标签中*/

 4     </style>

 5 </head>

（2）第二种：外链式写法

与内嵌式写法中直接把CSS写在了<head></head>中不同，在外嵌式写法中是把CSS写在了专门的.css文件里，然后在html中通过<link>标签引用就可以了，请看如下示例：

 <head>

    <link rel="stylesheet" type="text/css" href="csstest.css" />  /*在实际开发中，这种运用最多，因为可以降低后期的维护性成本*/

 </head>

（3）第三种：行内式写法，这种写法作用范围相对小，但优先级最高，具体后面讲

 <body>

     <p style="color:blue; font-size:40px">欢迎访问蜗牛的博客。</p>

 </body>

CSS选择器

CSS常见选择器的分类:

基础选择器

标签选择器

类选择器

id选择器

通配符选择器

复合选择器

并集选择器

后迭代选择器

交集选择器

 <!DOCTYPE html>

 <html>

 <head>

          <style type="text/css">

           p{

             color: red;

             background-color: pink;

           }

            .testclass{

             color: red;

             background-color: white;

           }

            #testid{

             color: red;

             background-color:green;

           } 

         </style>

 </head>

 <body>

     <p>我是标签选择器</p>   <!--标签选择器只要把标签名放前面就好，也可以同时放多个-->

     <h4 class="testclass">我是类选择器</h4>  <!--类选择器签名前面加一点在取一个名字-->

     <h4 id="testid">我是id选择器>            <!--id选择器前面加#在取一个名字-->

     <h4>我什么都不是</h4>

 </body>

 </html>

演示效果：

注意：

id选择与类选择器不同的是：一个标签只能调用一个ID选择器。虽然多个标签可以使用同一ID选择器，但是强烈不建议这么做，如果出现多个标签id相同的情况下，那么当你用js获得属性的时候，往往只能获得第一个。所以，在实际开发中极少采用ID选择器而多用类选择器。

通配符选择器：

通配符使用星号*表示，意思是“所有的”

*{

    padding:0;

    margin:0;

}

这里是设置所有元素的外边距margin和内边距padding都为0。

不过，由于*会匹配所有的元素，这样会影响网页渲染的时间，因此很多人开始停止使用*通配符选择器，取而代之的是，把所有需要统一设置的元素，放在一起，一块设置。

blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{ margin:0;padding:0}

复合选择器

并集选择器：  <!--并集选择器有几个标签就对几个标签起作用，标签之间用逗号隔开-->

 <!DOCTYPE html>

 <head>

 <title>并集选择器</title>

 </head>

   <style type="text/css">

      h4,span{

         color:red;

      }

   </style>

 <body>

     <h4>我是h4标签</h4>

     <span>我是span标签</span>

 </body

 </html>

运行结果如下：

后迭代选择器 ：

特点：向后面迭代选择（向子标签)

 <!DOCTYPE html>

 <html>

     <head>

         <title>后迭代选择器</title>

     </head>

         <style type="text/css">

            .testdiv span{

           color:green;

            }

        </style>

    <body>

         <div class="testdiv">

             <p>我是p标签</p>

             <span>子标签（孙子）</span> <!--表面该css只对class为testdiv中嵌套的span标签起作用-->

        </div>

    </body

 ></html>

运行结果如下：

交集选择器

交集选择器一般是以标签选择开头，类选择器结尾

 <!DOCTYPE html>

 <html>

     <head>

         <title>交集选择器</title>

     </head>

      <style type="text/css">

     div span.redspan{

         color:red;

     }

    </style>

 <body>

     <div>

         <span>span1</span><br>

         <span class="redspan">sapn2</span><br> <!--只对这个有效果-->

         <span>span3</span><br>

     </div>

 </body>

 </html>

运行结果如下：

上面这些是一些有关基础css和选择器，接下来还有许多，我会一一道来！

css笔记详解（1）的更多相关文章

  1. CSS选择器详解（伪类） 转 http://blog.csdn.net/Panda_m/article/details/50084699

    CSS选择器详解 之 伪类 伪类对大小写不敏感 结构伪类选择器 结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文 ...

  2. css filter详解

    css filter详解 filter 属性详解 属性 名称 类型 说明 grayscale 灰度 值为数值 取值范围从0到1的小数(包括0和1) sepia 褐色 值为数值 取值范围从0到1的小数( ...

  3. JSX设置CSS样式详解

    JSX设置CSS样式详解 1. 使用className设置样式(CSS的其他选择器也是同理) (1)定义一个CSS文件style.css,和普通CSS一样定义class选择器 .sty1{//和普通C ...

  4. 带你走进CSS定位详解

    学习CSS相关知识,定位是其中的重点,也是难点之一,如果不了解css定位有时候都不知道怎么用,下面整理了一下关于定位属性的具体理解和应用方案. 一:定位 定位属性列表 position top bot ...

  5. 此博客使用的CSS样式详解！

    此博客使用的CSS样式详解! 页面使用的博客园模板为:LuxInteriorLight,可以在博客皮肤里找到. 页首屏蔽广告代码 <script>console.log("顶部标 ...

  6. web前端学习（三）css学习笔记部分（4）-- CSS选择器详解

    4.  元素选择器详解 4.1  元素选择器 4.2  选择器分组 用英文逗号","相连,使用相同的样式表 使用通配符对所有元素进行通用设定. 4.3  类选择器详解 4.3.1. ...

  7. javaScript笔记详解（1）

    javaScript基础详解 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 首先讲javaScript的摆放位置:<sc ...

  8. CSS中详解hight属性

    目录结构: // contents structure [-] hight属性值类型一览表 height的%的使用 定义 实例 需要注意的 参考文章 hight属性值类型一览表 value descr ...

  9. 转：CSS圆角详解

    CSS3是样式表(style sheet)语言的最新版本,它的一大优点就是支持圆角. 网页设计大师Nicholas Zakas的最新文章,清晰易懂地解释了CSS3圆角的各个方面,非常值得学习.以下就是 ...

随机推荐

  1. 《Miracle_House》团队项目系统设计改进

    一.团队项目系统设计改进: 1.分析项目系统设计说明书初稿的不足,特别是软件系统结构模型建模不完善内容: 对于原文档中,设计图中存在的错误以及文字描述不准确的地方进行了修改. 2. 团队项目Githu ...

  2. 2019-1-24 Spark 学习 --总体架构

    2019-1-24 Spark 学习 --总体架构 新建 模板 小书匠 1548339392539.jpg 1548339357270.jpg 1548339372461.jpg 1548339345 ...

  3. new-xml-data

    ~<cyfxml> <hhis> <hhi name="大货系统" is-sub-item-folder="True" is-su ...

  4. (Swiftmailer)高效的PHP邮件发送库

    Swiftmailer是一个类似PHPMailer邮件发送组件,它也支持HTML格式.附件发送,但它发送效率相当高,成功率也非常高,很多PHP框架都集成了Swiftmailer. Swiftmaile ...

  5. JDBC学习（含转载）

    首先连接数据库: Class.forName("com.mysql.jdbc.Driver");//加载jdbc驱动 Connection conn=DriverManager.g ...

  6. 洛谷[LnOI2019]长脖子鹿省选模拟赛 简要题解

    传送门 听说比赛的时候T4T4T4标程锅了??? WTF换我时间我要写T3啊 于是在T4T4T4调半天无果的情况下260pts260pts260pts收场真的是tcltcltcl. T1 快速多项式变 ...

  7. .Net WebApi开发SharePoint出现System.IO.FileNotFoundException: 找不到位于的 Web 应用程序

    System.IO.FileNotFoundException: 找不到位于 http://xxx/sites/xxxx 的 Web 应用程序.请确认正确键入了此 URL.如果此 URL 需要提供现有 ...

  8. suse11 安装 python3.6 python3 安装步骤

    首先需要去网上下载Python-3.6.4.tgz,libopenssl-devel-0.9.8j-2.1.x86_64.rpm zlib-devel-1.2.7-3.14.x86_64.rpm li ...

  9. redis_字典_哈希hash

    字典.哈希表基本数据结构 redis字典使用哈希表作为底层实现,基本结构就是数组+散列 typedef struct dictht { // 哈希表数组 dictEntry **table; // 哈 ...

  10. ADO.NET学习笔记（1）

    ADO.Net是.Net框架中为数据库的访问而封装的一个库.通过这个库我们可以简单便捷的访问数据库,并对数据库进行一些增删改查的操作,目前ADO.Net支持四种主流的数据库,分别是SQL.OLE DB ...