首页 > 代码库 > 前端开发工程师 - 01.页面制作 - 第4章.CSS

前端开发工程师 - 01.页面制作 - 第4章.CSS

2024-11-11 03:09:39   203人阅读

第4章.CSS

CSS简介

Cascading Style Sheet 层叠样式表：定义页面中的表现样式

history：

CSS1(1996)--CSS2(1998)--着手CSS3草案(拆分成很多模块)(2001)--CSS2.1修订(2007)--全面推广on-going（部分属性已经实现）

如何引入CSS？

外部样式表：页面的样式多

<head>

　　<link rel="stylesheet" href="http://www.mamicode.com/base.css">

</head>

内部样式表：页面的样式少

<head>

　　<style>...</style>

</head>　　

内嵌样式：不利于维护，不建议

<p style="......">...</p>

 语法：

selector {　　// 选择器

property1: value;　　// 属性名：属性值=属性声明

property2: value;

...

}

注释 /*...*/ （不支持//）

浏览器私有属性：

为了区分，会在之前加上特有的前缀 i.e. 

chrome/safari：-webkit-

firefox：-moz-

IE：-ms-

opera：-o-

为了兼容不同浏览器，会将私有属性写在之前，把标准写在最后

i.e. 

技术分享

属性值语法：

margin : [<length>|<percentage>|auto] {1,4}

基本元素：<length><percentage>auto；组合符号：[] | ；数量符号{1,4}

基本元素：

关键字：auto, solid, bold...

类型：

基本类型：<length><percentage><color>...

其他类型：基本类型的组合：<‘padding-width‘>(padding-width和属性同名，需要加引号)、<color-stop>

符号：/ , 用于分割属性值

 

 

inherit/ initial：每个属性都可以取这两个值

 

组合符号：

空格：必须出现，且顺序也必须相同

 

i.e. <‘font-size‘><‘font-family‘> --合法值：12px arial

 

&&：必须出现（顺序不要求）

 

i.e. <length>&&<color> --合法值：green 2px/ 1em blue

 

||：至少出现一个

 

underline||overline||line-through||blink --合法值：blink underline

 

|：只能出现一个

 

<color> | transparent -- 合法值：orange/ transparent

 

[]：分组作用，括号内看做一个整体

 

bold [thin || <length>] -- 合法值：bold thin/ blod 2em

 

数量符号：

无：出现一次

+：出现一次或多次

?：出现0次或一次

{}：出现次数的范围(included)

*：出现0次一次或多次

#：出现1次或多次，中间必须要用,隔开

以上为普通规则的语法，还有一种叫@规则：

@标识符...;

@标识符... {}

i.e.

@media: 设备符合该媒体查询条件，里面的样式才会生效

@keyframes：描述css动画的中间步骤

@font-face：引入web的字体

等等

 

选择器

简单选择器

标签选择器：p{......} ：p即为p标签

类选择器：在标签内加入class属性和对应值（注：class的值可以是多个），.class_value {......}

className: naming convention 字母、数字、中划线、下划线；必须以字母开头，case sensitive

id选择器：在标签内加入id属性和对应值

与类选择器类似，区别：#id_value {......}；unique id；

通配符选择器：* 选择页面内所有的元素

属性选择器：

选中具有某个属性的元素 [attribute] {......}

i.e. case 修改密码

<form action="">
    <div>
        <input disabled type="text" value="张三">　　// 用户无法修改，css可使用disabled属性选择器
    </div>
    <div>
        <input type="password" placeholder="密码">
    </div>
</form>

 

[disabled] {...}

选中某个属性为某值的元素 [attribute=value] {......}

i.e. [type=button] {......}

#id即为该类属性选择器的特例

选中某个属性带有某值的元素 [attribute~=value] {......}

i.e. [class~=sports] {......}

.class即为该类属性选择器的特例

选中某个属性以某值开头的元素 [attribute|=value] {......}

i.e. [lang |= en] {......}  /*lang属性值为en或值以en开头的元素*/

选中某个属性以某值开头的元素 [attribute^=value] {......}

i.e. [href ^= "#"] {......}  /*href属性值以#开头的元素*/ （若属性值是符号或里面包含了空格，需要用到引号）

选中某个属性以某值结尾的元素 [attribute$=value] {......}

i.e. [href $= pdf] {......}  /*href属性值以pdf结尾的元素*/

选中某个属性包含了某个属性值的元素 [attribute*=value] {......}

i.e. [href *= "lady.163.com"] {......}

 

 

伪元素选择器

组合选择器

 

前端开发工程师 - 01.页面制作 - 第4章.CSS


联系
我们