在前端入门的前三天把网页制作过程中常用的一些标签和属性都认识和练习了一遍，能够做出简单模块的框架。就像老师说的网页制作就像建一栋大楼，html是砖和水泥，css是精装，js是完善各个功能。现在就开始进入装修步骤。

一：css的书写形式

1.行内样式　

　　　　　　<p id="p1" style="color: red">他真的很喜欢你，像风吹了八千里</p>

优点：1.写法简单，2.优先级高

缺点：1.内容和样式没有分离，2.样式没有复用性，仅作用于当前元素，3.当属性太多时布局不好看

2.内部样式　　

　　　　　　</head>
　　　　　　　　　<title>css入门</title>
    　　　　　　　<style>
       　　　　　　 p{
            　　　　　　color: plum;
            　　　　　　font-size: 30px;
           　　　　　　 text-align: center;
       　　　　　　　 }
    　　　　　　　　</style>
　　　　　　　</head>
　　　　　　　<body>
　　　　　　　　　　　　<p>他真的很喜欢你，像风吹了八千里</p>

　　　　　　　</body>
　　　　　　　</html>

3.外部样式
　　在工程中新建css文件，用
　　　　　　　<link rel="stylesheet" href="../../css/first.css">
引入所写的样式
优点：1.css,html完全分离，2.css得到充分复用
缺点：要说缺点应该就是打开另外一个文件写起来需要来回切换吧

二：语法：

　　　选择器{

　　　　　　　　属性设置

　　　　　　}

常用选择器类型：

元素选择器：直接写元素名称，选中的是当前页面所有同名元素，不能单独设置

类选择器：在标签中写class=””,在style中用.class名，类选择器的优先级比元素优先级高，同一个class名可以在不同标签中使用

Id选择器：在标签中写id=””,在style中写#id名，每一个id只能用一个

并集选择器：中间用逗号隔开，适用于要对多个标签进行相同的属性设置

后代/子代选择器：后代选择器： 空格 范围大；子代选择器：> 范围小某些样式会被子代后代继承如color,有些则不会,如height

伪类选择器：用冒号来使用伪类选择器

first-child：第一个元素

first-child：最后一个元素

nth-child(n)：第n个元素

　　　　　　　<style>
   　　　　　　　　li:nth-child(2n){
       　　　　　　　　　　　　　　　　 color: red;
  　　　　　　　　　　　　　　　　　  }
  　　　　　　　　 li:nth-child(2n-1){
       　　　　　　　　　　　　　　　　　 color: yellow;
   　　　　　　　　　　　　　　　　　　 }　　
　　　　　　　</style>  
 此时li中偶数位置字体颜色变为红色，奇数位置字体为黄色

hover：鼠标移上

通用选择器：*：通配符选择器匹配当前界面所有元素，一般只用在margin: padding中

　　　　　　　　<style>
   　　　　　　　　*{
        　　　　　　　　margin: 0;
       　　　　　　　　 padding: 0;
   　　　　　　　　 }
　　　　　　　　<style\>

优先级：

在正常的引入顺序下(先引入外部,再引入内部)优先级(就近原则)的顺序为:行样式>内部样式>外部样式

特殊情况：

引入在内部之后则由于就近原则执行外部属性权值：内联样式+1000分(style),id选择器100,class选择器10,元素选择器

分数越高则优先权越高
!important 优先级高于行样式

css格式比较及选择器类型总结的更多相关文章

  1. CSS选择器类型总结

    CSS选择器类型总结 1.通用选择器 一般用于给所有元素做一些通用性的样式设置,比如清除内边距.外边距等.但是效率比较低,尽量不要使用. * { margin: 0; padding: 0; } 2. ...

  2. CSS样式----图文详解：css样式表和选择器

    主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...

  3. CSS魔法堂：选择器及其优先级

    一.前言    首先看看一道阿里这期网申的题目吧! 1.找出下面优先级相同的选择器 A. img.thumb:after B.[data-job="frontend"]::firs ...

  4. CSS样式----css样式表和选择器（图文详解）

    本文最初于2015-10-03发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样 ...

  5. CSS 基础知识点 样式 选择器 伪类

    CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...

  6. 认识CSS中css引入方式、选择器、文本样式设置以及显示模式

    前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部 ...

  7. 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记

    [CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...

  8. css语法规范、选择器、字体、文本

    css语法规范 使用 HTML 时需要遵从一定的规范,CSS 也是如此.要想熟练地使用 CSS 对网页进行修饰,首先需要了解CSS 样式规则. CSS 规则由两个主要的部分构成:选择器以及一条或多条声 ...

  9. CSS简介，基础选择器，字体属性，文本属性

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...

随机推荐

  1. hibernate NUMBER 精度

    通过Hibernate映射实体时会根据数据库中NUMBER类型的精度,生成相应的POJO类中相对应的主键类型.经过亲测结果如下: NUMBER(1) POJO类中生成的是Boolean publicc ...

  2. Vue项目碰到"‘webpack-dev-server’不是内部或外部命令，也不是可运行的程序或批处理文件"报错

    解决办法: 最后将项目里的“node_modules”文件夹删除,然后在cmd中cd到项目目录,依次运行命令:npm install和npm run build,最后运行npm run dev后项目成 ...

  3. ACM学习之路

     2018-10-18 11:03:00 今天开始踏上实现梦想的道路,希望自己不要懈怠. 坚持做简单的事,坚持下来就会变得不简单.

  4. 连接HTTP服务器

    一.前提 Android 系统上面默认所有Http的请求都被阻止了. 需要在androidmanifest.xml的 application标签上加入 android:usesCleartextTra ...

  5. 对palindrome的常用判断

    判断String是否为palindrome:Two Pointers(left & right) 同时边扫边check 当前两边的char是否相同 code public boolean is ...

  6. Spring常用注解总结(1)

    前言:项目中常用的注解常看常记,总会对自己有些好处,所以在这里分享一下. 使用spring时,可以使用xml配置文件配置相关信息.但是我还是喜欢用注解的方式,因为可以充分利用反射机制获取类结构信息,而 ...

  7. php使用redis的GEO地理信息类型

    redis3.2中增中了对GEO类型的支持,该类型存储经纬度,提供了经纬设置,查询,范围查询,距离查询,经纬度hash等操作. <?php $redis = new Redis(); $redi ...

  8. node 单个表加条件查询

    export const getTeacher = query => {   const wh = model.query(qb => {     qb.where('isNoLectur ...

  9. Python调用Linux bash命令

    import subprocess as sup  # 以下注释很多(为了自己以后不忘), 如果只是想在python中执行Linux命令, 看前5行就够了 # 3.5版本之后官方推荐使用sup.run ...

  10. Maven [ERROR] 不再支持源选项 5。请使用 6 或更高版本

    报错信息如下 解决办法一 在settings.xml文件中指定jdk版本 既可以修改全局的settings.xml文件(C:\Program Files\apache-maven-3.6.0\conf ...