css概述与语法

原創

2020-02-22 00:38

1. css概述

1. 问题

先带着问题学习css：

设置页面中所有的文本颜色为红色。
设置页面中所有的p元素文本为蓝色。
设置页面中所有的h3元素文本也为蓝色。
将页面中所有的p元素文本颜色改为绿色。

HTML的不足：

1. 不同的标记想完成相同的效果使用的是不同

         ...
            <body text="red"> 修改文本颜色
            <font color="blue"> 修改文本颜色

2. 样式效果不通用

        css作用：
           1. 以统一的方式实现样式的定义                   
               color：red；
           2. 提高页面样式的可重用性和可维性

2. 什么是css

简介：CSS（Cascading Style Sheets）
层叠样式表，级联样式表，简称样式表
实现了内容（HTML）与表现（CSS）的分离

3. CSS 与 HTML 之间的关系

 HTML是构建网页的结构
 css是构建HTML元素样式

4. HTML属性与CSS样式的使用原则

ex（例子）：
html ：修改文本颜色
css ： color：red；修改文本颜色
w3c：建议尽量使用css样式取代HTML属性

         <td colspan="3">

colspan属性在css中没有方式能够取代，所以针对跨列来讲，
只能使用 HTML1 元素属性，不能使用css属性

2.css语法

1. 使用css样式表

分为：

内联方式
内部样式表
外部样式表

1. 内联方式

内联方式介绍：将样式声明在元素的style属性中

语法：

<ANY style=“样式声明;> 样式声明”</ANY>
样式声明：表示一个具体显示效果，多个样式声明之间，用；隔开
每个样式声明都由两部分组成：
样式属性; 属性值

ex（例子）：
样式属性：属性值
color 颜色英文表示法
font-size 以px或pt为单位的数值
background-color 颜色英文表示法

设置某元素的文本颜色为红色，文字大小为24px，背景颜色为绿色：

      <ANY style="color：red;font-size:24px;background-color:gree;"></ANY>

2. 内部样式表

 内部样式表介绍：将样式声明定义在页面的style 元素中

在<head>中添加<style></style>元素
2. 在style中添加任意多“样式规则”
样式规则：
选择器{
样式声明；/* 属性：值； */
样式声明；
… …
}
```
 选择器： 规范了页面中哪些元素能够使用定义好的样式。
```

ex（例子）：
p{
color：red；
font-size：48px；
background-color：green；
}

p{}：定义页面中所有p元素的样式

命令例子显示：

显示例子：

3. 外部样式表

步骤：

创建一个单独的样式表文件保存样式规则
**.css
只能编写遵循css规范的内容
1. 在需要的页面上引入样式表文件
```
    <head>
       <link rel="stylesheet" href="css文件
      url">
   </head> 
```

(例子1) 文本颜色为红色，文字大小：24px：

命令显示例子：

显示例子：

2. css样式特征

1. 继承性

子级元素可以直接使用父级元素声明好的样式
大部分的css样式属性是可以被继承的。

2. 层叠性

可以为一个元素声明多个样式规则中的样式如果样式不冲突的话
，多个样式规则中的样式可以层叠为一个。

3. 优先级

样式定义冲突时，按照不同样式使用的“优先级”来应用样式
浏览器缺省设置爱（User Agent Stylesheet）中：
外部样式表或内部样式表
就近原则-谁离元素近，就用谁高：内联样式

4. ！important 规则

作用：显示调整样式的优先级
语法：
属性名称：值！important;
（尽量少用）
IE以及以下浏览器不支持
打破默认优先级规则

2. css基础选择器

1. 它的作用：

规范了页面中哪些元素能够使用定义好的样式
目的：匹配页面元素

2. 详解：

1. 通用选择器

          作用：  匹配页面中所有的元素
          语法：
            *{样式声明;}
          缺点： 效率较低，尽可能少用

2. 元素选择器

         作用：定义页面某一标签的默认样式
         语法：
            元素{
                样式声明； 
            }

3. 类选择器

作用：
由css定义好，可以被任意标记的class属性值进行引用的选择器
语法：
.类名{样式声明;}

类名：

不能以数字开始
2. 除_,-意外不能有其它特殊符号
引用：
<ANY class=“类名”>
引用方式 - 多类选择器的引用
可以将多个类选择器，同时应用在一个元素中
语法： <ANY class=“class1 class2 class3”>

练习：

span元素的背景颜色为灰色（gray），
文本颜色为绿色（green）， div文字显示为橘黄色，文字加粗显示。
p、h3 文本颜色为红色。

解析：

显示命令例子：

实例演示：

chenyiboke

发布了29 篇原创文章 · 获赞 50 · 访问量 2555

私信关注

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.