资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/CSS基础

CSS基础

PAMPANG / 2174人阅读

摘要：语法选择器声明声明由属性属性值组成属性宽度单位高度单位背景颜色颜色的英文或者十六进制颜色字体颜色字体大小注释单行注释多行注释样式表内部样式表将语法写在标签里面，而标签写在里面。

css语法:选择器{声明}; 
声明由 css属性:属性值; 组成
p{background-color: #ccc;}
css属性 
width 宽度(单位：px)
height 高度（单位:px）
background-color 背景颜色(颜色的英文或者十六进制颜色)
color 字体颜色
font-size 字体大小
……
css注释 
 /*h3{width:300px;}*/ 单行注释
 
 /* p{
        width:300px;
        height: 300px;
    } */多行注释
css样式表

1.内部样式表：将css语法写在style标签里面，而style标签写在head里面。作用域是本页面上。

    
    
    
        
        Document
        
       
    
    
        
内部样式表

2.外部样式表：新建一个css文件，在css文件里写css语法.接着在html文件里通过link标签（写在head里面）的href属性链接到该css文件。作用域是只要链接到该css文件的所有html页面。

[注] linkrel="stylesheet"说明链接的是一个样式表文件。
test.css文件：
h3{
    width:300px;
    height:300px;
    background-color:red;
}

html文件：



    
    Document
    


    
外部样式表

3.内联样式表（行内）：将style作为html属性，将声明（css属性:css属性值;）作为html属性值。作用域是当前元素




    
    Document


    
内联样式表
样式表的优先级

前提：出现层叠性（对同一个元素添加相同的css属性）问题的时候，才会有优先级的比较。

优先级：内联样式>内部样式,内联样式>外部样式。内部样式与外部样式，誰写在后面，就覆盖前面的相同元素的相同属性。

选择器

1.标签选择器，通过标签名获取元素(相当于人的姓名)

    div{
        width:200px;
        height:200px;
        background-color:#666;
    }

2.类选择器，通过.类名获取元素(相当于人的外号)

.box{
    width:200px;
    height:200px;
    background-color:#666;
}

3.id选择器，通过#id名获取元素(相当于人的身份证号码，元素的id有且只有一个)

#box{
    width:200px;
    height:200px;
    background-color: #666;
}

[注]类和id选择器的命名规则：英文开头，包含数字、下划线

    
类选择器和id选择器

    
id选择器
选择器的优先级

!important>行内样式>id选择器>类选择器>标签选择器>通配符选择器




    
    Document
    


    
选择器优先级
CSS核心属性 字体属性 font

1.字体大小 font-size,单位为px、rem、pt等。

浏览器默认字体大小为16px,最小字体为12px。(9pt=12px,12pt=16px)
p{font-size:24px;}

2.字体加粗 font-weight,属性值为：bolder更加粗 bold加粗600-900 normal默认正常100-500。

p{font-weight:bold;}

3.字体倾斜 font-style,属性值为：normal默认正常 italic倾斜 oblique更倾斜

p{font-style:oblique;}

4.字体家族 font-family

该属性的属性值若为中文字体或多个单词组成，则需要加上双引号。若存在多个字体，则用逗号隔开。表示找不到前一个字体时，就用后面的。
p{font-family:"Times New Roman","楷体","宋体";}

5.字体颜色 color，属性值为：颜色的单词或者十六进制

十六进制：0-9 a b c d e f;

表示颜色:#000000,前两个0代表红色，中间两个0代表绿色，后两个0代表蓝色.若是所有表示同一颜色的两个数是一样的，则可以省略成三个数字。

div{color:yellow;}
p{color:#ccc;}
span{color:#ff0000;}//红色，可简写为:#f00;
a{color:#00ff00;}//绿色，可简写为:#0f0;
i{color:#0000ff;}//蓝色，可简写为:#00f;
文本属性 text

1.文本设置大小写 text-transform，属性值为：lowercase小写 uppercase大写 capitalize首字母大写 none默认不变换。

p{text-transform: none;}

2.文本修饰 text-decoration，属性值为：underline下划线 overline上划线 line-through删除线 none默认没有修饰 blink闪烁

p{text-decoration:blink;}

3.首行缩进 text-indent,单位:em,以当前字体的大小为基准(可以为负值)

p{font-size:16px;text-indent:-2em}
p{text-indent:2em}//常用，首行缩进2个文字

4.字间距 letter-spacing

p{letter-spacing:30px}

5.词间距 word-spacing(以空格作为标识符)

p{word-spacing: 30px}

6.文本在当前容器中的水平对齐方式 text-align，属性值为：left默认向左 right向右对齐 center居中对齐 justify调整,对英文有效果。

p{
    width: 200px;
    height: 200px;
    font-size:18px;
    text-align:center;
}

7.文本在垂直方向的对齐方式(行内元素):vertical-align,属性值为：baseline默认以基线对齐 middle中线 top顶线 bottom底线。

a{
    font-size:24px;
    vertical-align:middle;
}
span{
    vertical-align:middle;
}
img{
    vertical-align:middle;
}
列表属性 list-style

1.列表样式类 list-style-type,属性值为：disc默认实心圆 circle空心圆 square方块 none没有。

2.列表样式图片 list-style-image:url(路径)

3.列表样式的位置 list-style-position,属性值为：outside列表项外边（默认） inside列表项里边。

ul,li{
    list-style-type: none;//常用
    list-style-image: url("../images/arror.jpg");
    list-style-position: inside;
    
}
//关于li前面的小图标，一般会给li留个padding的位置，再给li加上背景图片，而且要no-repeat，background-position一般都是0 center
边框属性 border

1.边框宽度 border-width

2.边框样式 border-style,属性值为：solid实线 dashed虚线 dotted点线 double双线

3.边框颜色 border-color

div{
    width: 200px;
    height: 200px;
    border-width:3px;
    border-style: double;
    border-color:red;
    
}

4.改变某条边框的属性值,border-方向left、right、top、bottom）

border-left:2px dashed red;

5.改变某条边框的某个属性的属性值,border-方向-属性(width、style、color)

border-right-style:dotted;
行高 line-height 
属性值为:normal(默认) 具体像素值或者数值(eg:44px/2) 百分比(%,基于当前字体尺寸的百分比行间距。) inherit(从父元素继承 line-height 属性的值。)
p{
    width:100px;
    height:30px;
    font-size:18px;
    text-align:center;
    line-height:30px;
}
//常用的文本水平和垂直方向都居中：text-align:center;line-height:numpx;line-height的值与元素的高度一致。
背景属性 background

1.背景颜色background-color

2.背景图片background-image:url()

3.背景图片重复background-repeat （repeat默认重复 no-repeat不重复 repeat-x水平方向重复 repeat-y垂直方向重复）

4.背景图片在容器中的位置 background-position:水平方向 垂直方向;属性值可以为数值、方位（leftcenterright、topcenterbottom）。

5.背景图片的固定 background-attachment,属性值为：scroll默认滚动 fixed固定。

div{
    width: 800px;
    height: 800px;
    border:10px solid #ccc;
    /*background-color:#ffffd;*/
    background-image:url("../images/666.jpg");
    background-repeat:repeat-y;
    background-position:center center;
    
    background-attachment: fixed;
}
浮动 float

属性值为：left向左浮动 right向右浮动 none不浮动

在标准的文档流中，页面布局必须遵循从左往右，从上往下

1.浮动后的元素会脱离标准流,但是里面的内容不会脱离文档流。

2.浮动后的元素相当于行内块级元素（一行显示多个、可以设置宽高）

3.若是一行放不下所有的浮动元素，则放不下的那个浮动元素会在它上一个元素的最低点开始摆放。




    
    Document
不透明度 opacity

属性值为0-1之间的小数，数值越大越不透明

div{
    width:100%;
    height:100%;
    background:#999;
    opacity:0.2;
}
云服务器 私有云 css基础 基础css css基础教程 基础选择器css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113607.html

相关文章

  • #WEB安全基础 : HTML/CSS | 文章索引

    摘要：黑体本系列讲解安全所需要的和黑体安全基础我的第一个网页黑体安全基础初识黑体安全基础初识标签黑体安全基础文件夹管理网站黑体安全基础模块化黑体安全基础嵌套列表黑体安全基础标签拓展和属性的使用黑体安全基础嵌套本系列讲解WEB安全所需要的HTML和CSS #WEB安全基础 : HTML/CSS | 0x0 我的第一个网页 #WEB安全基础 : HTML/CSS | 0x1初识CSS #WEB安全基...

    EscapedDog 评论0 收藏0

  • 关于CSS Reset 那些事（四）之 构架CSS基础样式库

    摘要：现在回到我们这一章节的标题，将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面，网页上并不存在表单内容，那么你就要移除一些冗余的代码，开始自定义样式来满足自己的需求。 前言 先来回顾一下前几章节，我们都说了哪些内容： CSS Reset 历史 与 Normalize.css 介绍 Normalize.css...

    mj 评论0 收藏0

  • 关于CSS Reset 那些事（四）之 构架CSS基础样式库

    摘要：现在回到我们这一章节的标题，将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面，网页上并不存在表单内容，那么你就要移除一些冗余的代码，开始自定义样式来满足自己的需求。 前言 先来回顾一下前几章节，我们都说了哪些内容： CSS Reset 历史 与 Normalize.css 介绍 Normalize.css...

    levius 评论0 收藏0

  • 关于CSS Reset 那些事（四）之 构架CSS基础样式库

    摘要：现在回到我们这一章节的标题，将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面，网页上并不存在表单内容，那么你就要移除一些冗余的代码，开始自定义样式来满足自己的需求。 前言 先来回顾一下前几章节，我们都说了哪些内容： CSS Reset 历史 与 Normalize.css 介绍 Normalize.css...

    Yu_Huang 评论0 收藏0

  • 前端之CSS基础学习

    摘要：上面五个问题就是我总结的基础概念，学习过程中一定要把它们弄明白别忘了有哦。 请带着以下几个问题进行学习 CSS是什么 CSS的引用方式 CSS选择器 CSS优先级 CSS盒模型 基础知识学习和实例演练教程 MDN中css教程CSS基础学习教程（css快速入门）CSS参考手册（便于了解更多css属性）CSS3教程（适用于移动端开发的css新特性） 入门学习，一定要快，没有必要花大量时...

    Hwg 评论0 收藏0

  • 前端菜鸟笔记 Day-3 CSS基础

    摘要：派生选择器依据元素的位置关系来定义样式。称其为上下文选择器，称其为派生选择器。在现在布局中，选择器常常用于建立派生选择器。和一样，也可被用作派生选择器。 文章大纲来源：【Day 3】HTML复习 + CSS基础 初识CSS 入门CSS 初识CSS 层叠样式表（Cascading Style Sheets），即前端常说的CSS。 内容引用：CSS 简介 样式解决了什么问题？ HTML...

    mingzhong 评论0 收藏0

发表评论

登陆后可评论

0条评论

PAMPANG

男|高级讲师
我要私信

TA的文章

阅读更多

云社区相关服务

提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
最新活动
阅读需要支付1元查看
<