CSS入门

番茄西红柿发布于2019-04-23 13:32 / 938人阅读

CSS介绍 CSS：层叠样式表：Cascading Style Sheets：修改HTML样式 CSS引用

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引用CSStitle>
    
    <link rel="stylesheet" href="style.style">
    
    <style>
        p {
            color: red;
        }
    style>
head>
<body>
    
    <p style="color: red">引用样式p>
body>
html>

CSS选择器

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器title>
    <style>
        /*标签选择器
        选择所有p标签*/
        p {}
        /*id选择器
        选择id为xiu的标签*/
        #xiu {}
        /*类选择器
        选择所有class为kang的标签*/
        .kang {}
        /*后代选择器
        选择div里面所有class为kang的标签*/
        div .kang {}
        /*子代选择器
        选择div里面子类的所有p标签*/
        div > p {}
        /*交集选择器
        选择p标签且id为kang的标签*/
        p#kang {}
        /*并集选择器
        选择id为id的标签和class为kang的两个标签*/
        #id,.kang {}
        /*伪类选择器 :link未访问的链接 :visited已访问的链接 :hover鼠标移上去的链接 :active选中的链接*/
        p:hover {}
        /*结构伪类选择器
        选择第一个p标签*/
        p:first-child {}
        /*结构伪类选择器
        选择最后一个p标签*/
        p:last-child {}
        /*结构伪类选择器
        选择第2个p标签 n表示所有 2n表示偶数 2n+1表示奇数*/
        p:nth-child(2) {}
        /*结构伪类选择器
        选择所有偶数的p标签 even偶数 odd奇数*/
        p:nth-child(even) {}
        /*属性选择器
        选择属性为href的a标签*/
        a[href] {}
        /*属性选择器
        选择属性href和属性title的a标签*/
        a[href][title] {}
        /*属性选择器
        选择属性和值为href="url"的a标签*/
        a[href="url"] {}
        /*属性选择器
        选择属性和值为href="url"且title="提示"的a标签*/
        a[href="url"][title="提示"] {}
        /*属性选择器
        选择属性的值以url开头的a标签,该值必须是整个单词*/
        a[href|="url"] {}
        /*属性选择器
        选择属性的值以url开头的a标签*/
        a[href^="url"] {}
        /*属性选择器
        选择属性的值以url结尾的a标签*/
        a[href$="url"] {}
        /*属性选择器
        选择属性的值包含url的a标签,该值必须是整个单词*/
        a[href~="url"] {}
        /*属性选择器
        选择属性的值包含url的a标签*/
        a[href*="url"] {}
    style>
head>
<body>
    <p>段落p>
    <a href="url" title="提示">百度a>
body>
html>

CSS字体

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体title>
    <style>
        p {
            /*设置字体大小*/
            font-size: 20px;
            /*设置字体*/
            font-family: "宋体","微软雅黑";
            /*字体加粗*/
            font-weight: 700;
            /*字体倾斜*/
            font-style: italic;/*normal 取消样式*/
            /*字体颜色 预定义颜色:red;十六进制颜色:#FF0000;RGB颜色:rgb(255,255,255) */
            color: #aa00cc;/* #aa00cc可以简写为#a0c 两两相同才可以*/
            /*设置行高*/
            line-height: 20px;
            /*设置文字对齐方式*/
            text-align: center;
            /*段落首行缩进*/
            text-indent: 2em;
            /*设置字体装饰 underline下划线 overline上划线 line-through删除线 none无装饰 */
            text-decoration: underline;
        }
        h1 {
            /*字体连写，顺序不能交换，size/family不能省略*/
            /*font: font-style font-weight font-size font-family;*/
            font: 25px "宋体";
        }
    style>
head>
<body>

    <p>字体p>
    <h1>标题h1>
body>
html>

元素

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">ｈ
    <title>块级元素title>
    <style>
        /*　块级元素 block-level
        总是从新行开始
        高度，行高，外边距都可以控制
        宽度默认是容器的１００％
        可以容纳内联元素和其他元素
        常见的块元素：  
  等等*/

        /* 行类元素 inline-level
        和相邻的行内元素在一行上
        高宽无效，但水平方向的padding和margin可以设置，垂直方向无效
        默认宽度为他本身内容的宽度
        常见的行内样式有：   等等 */

        /*行内块元素 inline-block
        和相邻行内元素在一行上，但之间有空白缝隙
        默认宽度为他本身内容的宽度
        宽度，高度，外边距都可以控制
        常见的行内块元素有：   */

        /*可以将行内元素和行内块元素看作文字对待*/
        div {
            /*将块元素转换为行内元素*/
            display: inline;
        }
        span {
            /*将行内元素转换为块元素*/
            display: block;
        }
        a {
            /*将行内元素转换为行内块元素*/
            display: inline-block;
        }
    style>
head>
<body>
    <div>div>
    <span>span>
    <a href="#">a>
body>
html>

CSS的特性

层叠性

DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">ｈ <title>继承性title> <style> /*一般情况下，如果出现样式冲突，会按照CSS的书写顺序，已最后的样式为准样式冲突，遵循的原则为就近原则，那个样式离结构进，就执行那个样式,就近原则样式不会冲突，不会层叠 color样式冲突了，就执行最近的一个color，font-size没有冲突，正常执行 */ p { color: red; font-size: 20px; } p { color: blue; } style> head> <body> <p>段落p> body> html>

继承性

DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">ｈ <title>继承性title> <style> /*子标签会继承父标签的某些属性，比如：字体颜色和字号*/ .xiu { color: red; } style> head> <body> <div class="xiu"> <p>段落p> div> body> html>

优先性

DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">ｈ <title>优先级title> <style> /* 继承或者*的贡献值 0000 每个元素的贡献值 0001 每个类,伪类的贡献值 0010 每个ID的贡献值 0100 行内样式的贡献值 1000 每个!important的贡献值无穷大贡献值越大,越先执行贡献值可以叠加,比如: div ul li {} -- 0003 .xiu ul li {} -- 0012 #xiu ul li {} -- 0102 */ .xiu { color: red!important;/*最先执行*/ } .xiu { color: blue; } style> head> <body> <div class="xiu"> <p>段落p> div> body> html>

背景图片

DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">ｈ <title>背景图片title> <style> body { /*添加背景颜色*/ background-color: red; /*添加背景图片*/ background-image: url(1.png); /*no-repeat图片不平铺 repeat-x水平平铺 repeat-y垂直平铺*/ background-repeat: no-repeat; /*设置图片位置 top上 bottom下 left左 right右也可以写数值x,y值 */ background-position: right bottom;/*如果只写一个,剩下一个为居中center*/ /*设置图片滚动 fixed固定 scroll默认滚动而滚动*/ background-attachment: fixed; /*设置图片透明度*/ background: rgba(0,0,0,0.5); /*设置背景图片的大小 cover 等比例铺满整个盒子，超出范围将隐藏 contain 等比例铺满整个盒子，保证图片始终显示在盒子内 */ background-size: 300px 300px;/*一般设置一个值，另外一个值默认auto 等比例缩放*/ /*background连写方式*/ /*background: 背景颜色背景图片地址背景平铺背景滚动背景位置*/ } style> head> <body> body> html>

边框

DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>边框title> <style> table { width: 100px; height: 100px; /*设置边框宽度*/ /*border-width: 1px;*/ /*设置边框样式 none无边框 solid实线边框 dashed虚线 */ /*border-style: dashed;*/ /*设置边框颜色*/ /*border-color: red;*/ /*设置上边框*/ /*border-top: 1px solid red;*/ /*border连写*/ border: 1px solid red; } td { border: 1px solid blue; } table,td { /*合并单元格相邻边框*/ border-collapse: collapse; } style> head> <body> <table cellpadding="0" cellspacing="0"> <tr> <td>修抗td> <td>修抗td> tr> <tr> <td>牛皮td> <td>牛皮td> tr> table> body> html>

边距

DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内边距与外边距title> <style> /* padding 用于设置内边距:自身的边框与自身内部内容的距离 margin 用于设置外边距:自身边框与相邻边框的距离 margin与padding的语法一样: padding-top 上内边距 padding-right 右内边距 padding-bottom 下内边距 padding-left 左内边距 padding: 3px; 上下左右都是3px padding: 3px 4px; 上下为3px,左右为4px padding: 2px 3px 4px;上2px,左右为3px,下为4px padding: 1px 2px 3px 4px; 上1px,左2px,下3px,右4px padding不能为负数值 padding在块级元素下,上下左右可以随意设置,会撑开盒子,一般要减去padding设置的高度宽度 padding在行内元素只有左右边距有效果,上下不识别 margin: 0 auto;设置水平居中,auto自动只对块元素起作用 margin在块级元素下,上下左右可以随意设置 margin在行内元素只有左右边距有效果,上下不识别 */ style> head> <body> body> html>

边距问题：1

DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style> /*外边距合并*/ .xiu { width: 100px; height: 100px; background-color: red; margin-bottom: 150px; } .kang { width: 100px; height: 100px; background-color: blue; margin-top: 100px;/*最终两个盒子的距离已最大的那个为准*/ } style> head> <body> <div class="xiu">div> <div class="kang">div> body> html>

边距问题2

DOCTYPE html> <

GPU云服务器云服务器 css入门 css快速入门 css入门到精通 css入门教程

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

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

上一篇：HTML简单介绍

下一篇：[翻译]一个新式的基于文本的浏览器 Browsh

相关文章

前端学习资源整理

稍微整理了一下自己平时看到的前端学习资源，分享给大家。 html MDN：Mozilla开发者网络 SEO：前端开发中的SEO css 张鑫旭：张鑫旭的博客 css精灵图：css精灵图实践栅格系统：详解CSS中的栅格系统媒体查询：css媒体查询用法 rem布局：手机端页面自适应布局移动前端开发之viewport的深入理解:深入理解viewport 淘宝前端布局：手机淘宝移动端布局 fl...

siberiawolf 2019-08-21 11:27 评论0 收藏0

webpack入门学习手记（五）

摘要：另外需要指定这个参数，表示在配置的数值以下的图片才进行编码，超过的不进行处理。代码如下所以过程就是引入了，然后进行打包处理，生成和。目前这个入门学习手记到这里就结束了。完相关文章入门学习手记一入门学习手记二入门学习手记三入门学习手记四 showImg(https://segmentfault.com/img/remote/1460000019860769?w=1150&h=599); ...

AlphaWatch 2019-08-26 10:13 评论0 收藏0

webpack -> vue Component 从入门到放弃（二）

摘要：我们可以根据模块类型扩展名来自动绑定需要的。当需要加载的文件匹配的正则时，就会调用后面的对文件进行处理，这正是强大的原因。这篇就这样吧，感觉进度有点慢从入门到放弃四从入门到放弃一从入门到放弃三源代码 Foreword 上一篇简单介绍了webpack的打包功能，应该说是比较无意义的打包，对于开发人员来说，这种效率是非常低的。所以我们来点升华。 First Step 我们给第一篇例子中加个...

DobbyKim 2019-08-20 14:37 评论0 收藏0

webpack -> vue Component 从入门到放弃（二）

摘要：我们可以根据模块类型扩展名来自动绑定需要的。当需要加载的文件匹配的正则时，就会调用后面的对文件进行处理，这正是强大的原因。这篇就这样吧，感觉进度有点慢从入门到放弃四从入门到放弃一从入门到放弃三源代码 Foreword 上一篇简单介绍了webpack的打包功能，应该说是比较无意义的打包，对于开发人员来说，这种效率是非常低的。所以我们来点升华。 First Step 我们给第一篇例子中加个...

xiaochao 2019-08-01 16:23 评论0 收藏0

CSS入门之引用、选择器、属性（六分之三）

摘要：入门教程六分之三篇没办法，我直播教小伙伴入门，属性讲完，准备说定位的时候，他们就喊停，不住了。。。选择器表达式如下相关效果见表达式关键词特性属性属性即样式定制的具体样式，比如定制宽高，分别为与等。 CSS 入门教程六分之三篇没办法，我直播教小伙伴CSS入门，属性讲完，准备说定位的时候，他们就喊停，hold不住了。。。所以先写到六分之三，23333333 要点解释引用如...

baishancloud 2019-08-30 15:54 评论0 收藏0

前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0

发表评论

登陆后可评论

0条评论

番茄西红柿

男|高级讲师

我要关注我要私信

TA的文章
阅读更多

tensor

阅读 681·2023-04-25 19:43

Windows 下安装 XGBoost

阅读 3853·2021-11-30 14:52

Hadoop 2.6.0 启动问题 lib/native/libhadoop.so which mi

阅读 3726·2021-11-30 14:52

VmShell：黑五美国VPS,免费先开通测试,满意后付款!支持tiktok美区

阅读 3793·2021-11-29 11:00

百度智能云：云产品特惠福利,1核2G轻量应用服务器仅48元/年

阅读 3745·2021-11-29 11:00

Linux系统和宝塔面板如何启用禁ping功能?

阅读 3810·2021-11-29 11:00

301重定向怎么做?301重定向设置方法有几种

阅读 3528·2021-11-29 11:00

wordpress网站重定向次数过多的解决方法

阅读 6007·2021-11-29 11:00

最新活动

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

CSS入门

相关文章

前端学习资源整理

webpack入门学习手记（五）

webpack -> vue Component 从入门到放弃（二）

webpack -> vue Component 从入门到放弃（二）

CSS入门之引用、选择器、属性（六分之三）

前端资源系列（4）-前端学习资源分享&前端面试资源汇总

发表评论

0条评论

番茄西红柿

男|高级讲师

TA的文章

tensor

Windows 下安装 XGBoost

Hadoop 2.6.0 启动问题 lib/native/libhadoop.so which mi

VmShell：黑五美国VPS,免费先开通测试,满意后付款!支持tiktok美区

百度智能云：云产品特惠福利,1核2G轻量应用服务器仅48元/年

Linux系统和宝塔面板如何启用禁ping功能?

301重定向怎么做?301重定向设置方法有几种

wordpress网站重定向次数过多的解决方法

最新活动