CSS学习一：css基础

前后分离的前端页面分为三部分：

  • 结构，HTML部分
  • 表现，CSS部分
  • 行为，JS部分

CSS：cascading style sheets层叠样式表，WEB标准中的表现标准语言，主要是对网页信息(HTML标签)的显示进行控制。

css样式表，通常写在head中，当然写在body中，结果也是一样。

CSS样式，分为：

  • 内部样式表，语法： 
    <style type="text/css">css样式语句</style>
  • 外部样式表，语法： 
    #1.在css目录，创建css样式表
# 2.在html文件中，引入此文件
<link rel="stylesheet" type="text/css" href="css/xxx.css"/>
  • 内联样式表，也叫行内样式表，嵌入式样式表 
    #行内样式表，就是在html标签行中，写样式：即html标签的style属性
<标签 style="属性：属性值；属性：属性值“></标签> 

优先级：行内样式的优先级最高。内部样式与外部样式表，按样式的书写先后顺序优先

 

CSS语法：

selector {属性1：属性1的值；属性2：属性2的值......;}

 

  • 每个CSS样式，都由3部分组成，选择器、属性和值。
  • 属性和属性值，必须放在{}花括号中，属性和属性值用冒号连接。
  • 每条声明，用分号结束
  • 当一个属性有多个属性值的时侯，属性值与属性值不分先后顺序
  • 在书写样式的过程中，空格，换号等操作，不影响属性的显示。

选择器的作用，找到使用此样式的标签。

 

示例，使用3种css方式，分别对p标签添加样式。

# index.html
<p>这是p标签</p>
<p style="color:blue;">这是行内样式的p标签</p>

 

使用内部样式，对p标签添加样式：

引入内部样式

<head>
<!-- 内部样式表 -->
<style type="text/css">
    p {
        color: red;
    }
</style>
</head>

使用行内样式：

<p style="color:blue;">北上文顶替23sadf</p>

使用外部样式，对p标签添加样式：

1.创建外部样式表，css/p.css

p {
    color: green;
}

 2.引入外部样式

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

可见，行内样式的优先级最高。

 

几个简单的css属性：

color，颜色：颜色值的表示有三种方式

  • 使用颜色单词名称表示，如red
  • 使用十六进制表示，如#ff0000
  • 使用rgb三元组表示，如rgb(255, 0, 0)

width，宽度：宽度值用数字表示。单位有px像素，em字符，%百分比。默认为auto，通过浏览器自动计算出宽度单位。

像素数值，决定标签或文字在浏览器中显示的大小或位置，页面中的最小计量单位为1px像素。

height，高度：其值和单位，同宽度一样。

backgroud-color，背景颜色：其值，同颜色一样。可以为所有元素设置背景色，包括body，一直到em和a等行内标签。

示例，外部样式：

p {
    color: green;
    color: #FF0000;
    background-color: #008000;
    width: 400px;
    height: 50px;
}

 

posted on 2018-11-10 21:47  myworldworld  阅读(81)  评论(0)    收藏  举报

导航