CSS入门基础学习一

一、CSS样式

  1、什么是CSS:

    CSS是指层叠样式表(Cascading Style Sheels),CSS通常为CSS样式表或层叠样式表,主要用于设置HTML文本内容,以及版本面的布局等

  2、HTML和CSS的关系:

    html结构层 负责从语义的角度搭建页面结构,CSS样式层 负责从审美的角度美化页面,JavaScript行为层 负责从交互的角度提升用户体验

  3、编写CSS

  缺省样式(浏览器样式),可以通过设置修改浏览器的样式,所有的标签都有默认的样式

  内联样式表:

<span style="clolor:red"></span>

  内嵌样式表:

<head>

<style>p{color:red}</style>

</head>

  外部样式,外联样式:新建一个文件,后缀名以.css命名(css文件),在html页面中通过

<link rel=”stylesheet” href=””> 标签将css文件引入

  书写方式的区别

    内嵌式写法:
      ◆代码可维护性较差,没有实现css代码与html结构的完全分离
      ◆影响的范围只有当前页面
    行内式写法:
      ◆代码可维护性极差,css代码和html结构没有实现分离
      ◆影响的范围只有当前标签

    外联式写法:
      ◆代码可维护性高,css与html结构完全分离
      ◆影响范围广,当前整个网页站点。

  4、CSS特性

    层叠性:

      样式的覆盖。 样式的层叠性与样式的调用顺序没有关系,与样式的定义顺序有关。层叠性发生的前提: 样式冲突

<style>
.one{
  color: red;
}
.two{
  color:yellow;
}
</style>
</head>
<body>
<div>
  <p class="two one ">文字的颜色</p> 答案:黄色
</div>
</body>

  继承性

    继承性发生的前提是标签之间属于一种嵌套关系

      ☞文字颜色可以实现继承

      ☞文字大小可以实现继承

      ☞字体可以实现继承

      ☞行高可以实现继承
      与文字有关的属性都可以 实现继承
    特殊性:
      <a href=”#”></a> 不能继承父元素中的文字颜色(层叠掉了)
      <h1></h1> 标题标签不能继承父元素中的文字大小

   优先级

     优先级的特点:

      默认样式<标签选择器<类选择器<id选择器<行内样式<!important
        0     1     10    100    1000    1000以上

  5、常见CSS属性

   属性                解释             书写规范
   width        宽度   width:300px;
   height       高度       height:300px;
   color       文本颜色(前景色) color:red;
   Background-color 背景颜色     background-color:green;
   font-size     文字大小     font-size:34px;
   Text-align    内容的水平对齐方式 text-align:left|center|right
   Text-indent   首行缩进      Text-indent:2em;

  6、CSS注释

    /*需要注释的文本*/

    可以单行注释也可多行注释

  7、样式表的分类

    标签选择器:   

a{
color:red;
text-decoration:none; /*超链接去掉下划线*/
}  

      作用:给指定的标签添加样式

      写法:标签名{属性:值;属性:值}

   

    类选择器:

.classname{
    color:red;
      }

      写法:.自定义类名{属性:值} /* 类名前面的点很重要*/

      特点:类样式表必须在相应的标签调用才生效,谁调用,谁改变。可以多个标签调用同一个类样式。同一个标签可以调用多个类样式,中间需要空格隔开。

      类的命名规范:

        ◎不能使用纯数字或者数字加英文来命名类名称。
        ◎不推荐使用汉字来给类命名。
        ◎不能以特殊符号给命名(_除外)。
        ◎不推荐使用标签代码或者样式的属性来命名类名称。

    Id选择器:

#IDname{
    color:red;
   }

      写法:#自定义名称{属性:值}

      特点:一个页面只能被调用一次,ID选择器配合JS的使用,一个标签只能调用一个ID选择器

      ID选择器命名规范

        只允许出现字母、下划线、数字,只允许以字母开头,命名没有长度的限制,但是不能出现标签名

      注意:ID选择器的优先级非常高,所以确定整个页面唯一出现时,才可以使用ID选择器,不然优先级问题在后续的维护中不能很好修改更新

    通配符选择器

*{
padding: 0px;
margin: 0px;
}

      写法:*{属性名:值}

        *代表所有标签,会给所有的标签加上样式,会增加服务器和浏览器压力,不推荐使用

    颜色的表达式

      ◎直接写颜色的名称
      ◎十六进制:0-ff,一共16个数值。#ff0000,前边2个数值对应的是红色,#00ff00,中间2个对应的是绿色,#0000ff,后边2个对应的是蓝色。

      ◎rgba:R:红色。 G:绿色; B:蓝色。最后一共a代表的是透明度,alpha,值是0-1.

 二、文字的属性

  文字的属性:

    font-size: 文字大小
    Font-family: 设置文字字体

  文字的连写:

{font: font-style font-weight  font-size/line-height  font-family;}/*自定义样式名称*/

  设置字体的三种方法

    1、直接写字体的中文名称

p{
color: pink;
font-size: 20px;
font-family:“微软雅黑”;
}

    2、直接写字体的英文名称

div{
color: green;
font-family:“songti”;
font-size: 24px;
width: 300px;
height: 200px;
background-color:orange;
text-align: center;
}

    3、写文字的unicode编码。

.p{
font-family:"5FAE\8F6E\96C5\9ED1"
}

三、复合选择器

  1、交集选择器(标签指定选择器)

    标签.自定义名称{属性:值;}

  2、后代选择器

    选择器+空格+选择器+空格+....选择器{属性:值;}

  3、并集选择器

    选择器+,+选择器+,+选择器{属性:值;}

  4、子元素选择器:子代选择器,是让CSS选择器智能选择儿子辈的元素

    例如:h1>strong{color:red;}

  5、层次选择器

  6、分组选择器

  7、属性选择器

    a、简单属性选择:h1[class]{color:red;}//选择所有拥有Class属性的h1标签

    b、根据属性值选择:p[id="aside"]{color:red;}//根据属性名相等选择

    c、属性名全包含:p[class~="a"]{color:red;}//只要包含属性就被选择

    d、属性模糊选择

       E[att^="val"]{sRules}//选择具有att属性属性值以val开头的字符串的E元素

       E[att$="val"]{sRules}//选择具有att属性属性值以val结尾的字符串的E元素

    e、属性模糊匹配包含

       E[att*="val"]{sRules}//选择具有att属性且属性值为包含val的字符串的E元素

  8、子元素选择器

  9、相邻兄弟选择器

  10、伪类选择器

  11、伪元素选择器

    通配符选择器:通配符选择器用“*”表示。他是所有选择器中作用范围最广泛的,能匹配页面中所有元素,通配符的穿透力很强,优先级会高于继承的样式会覆盖继承的样式

    语法:*{属性1:属性值1;属性2:属性值2}

四、伪类

  超链接默认状态下的样式a{}与a:link{}实现的效果是一样的

  a:link{
属性:值;
}
超链接访问过后的样式
a:visited{
属性:值; }
鼠标放到超链接上的样式
a:hover{ }
超链接激活状态下的样式
a:active{
}
获取焦点(光标)的时候的样式
:focus{
}
上一篇:CSS入门基础学习二


下一篇:scrapy爬虫成长日记之创建工程-抽取数据-保存为json格式的数据