CSS

来源：互联网发布：什么物流淘宝不能跟踪编辑：程序博客网时间：2024/06/01 12:22

CSS一般放在head标签内的Style中。

3种选择器

分别是：标签选择器、类选择器、id选择器。
标签选择器：根据html的标签设置css
类选择器：在同类标签中使部分标签实现自己的风格。
id选择器：一般配合div使用。

<body>        <ol>            <li>锄禾日当午</li>            <li class="myColor">汗滴禾下土</li>            <li>谁知盘中餐</li>            <li>粒粒皆辛苦</li>        </ol>        <div  id="div1">层叠式样式表(CSS)是用于描述外观和格式化标记语言编写的文档的样式表语言</div>  </body>

CSS:

<style type="text/css">    /* 标签选择器*/    li{        color:red;        font-size:30px;    }    /*类选择器*/    .myColor{        color:blue;    }    /* id选择器*/    #div1{        border:5px solid red;        width:100px;        height:300px;        background-color:lime;    }}

这里写图片描述

属性选择器

属性选择器的格式

[属性名]{    属性名：属性值；}

其中[]中可以是属性，也可以是[属性名=属性值],还有包含和以xx开头来判断等。

<style>    [title]{        color: red;        font-size: 1cm;    }</style>

<p title="hello">Hello World</p><p title="hello">Hello JS</p>

还有其它格式：

[title=Java]{    color:green;}[title~=Android]{    color: blue;}[title|=pp]{    color: yellow;}

表单样式：

input[type=text]{    margin-bottom: 20px;    display: block;    background-color: yellow;    width: 200px;}0input[type=button]{    display: block;    background-color: yellow;    width: 100px;    margin-left: 30px;}

这里写图片描述

文字和文本属性

属性说明 font-weight:bold; 字体类型 font-size:35px; 字体大小 font-family:宋体; 字体 color:blue; 颜色 text-indent:2em; 首行缩进 line-height:35px; 行高

<style>         div{        /* color:blue; */        /* font-weight:bold; */        /* font-size:35px; */        /* font-family:宋体; */        color:blue;        font:bold 25px 黑体;        text-indent:2em;/*缩进*/        line-height:35px;/*行高*/    }</style>

也可以一次写

font:bold 25px 黑体;

这里写图片描述

列表属性

list-style:简写属性，用于吧所有列表的属性设置于一个声明中
list-style-image:将图像设置为列表项的标志，就是左边的图标

text-decoration:none;：向文本添加修饰（下划线等）

<body><!--默认是一个空格，添加&nbsp代表增加一个空格--><ol>    <li><a href="#">电视</a> &nbsp  &nbsp  &nbsp  &nbsp <a href="#">电视</a>  <a href="#">电视</a></li>    <li><a href="#">电视</a> &nbsp <a href="#">电视</a>  <a href="#">电视</a></li>    <li><a href="#">电视</a> &nbsp <a href="#">电视</a>  <a href="#">电视</a></li>    <li><a href="#">电视</a> &nbsp <a href="#">电视</a>  <a href="#">电视</a></li></ol></body>

<style>li{    list-style:none;    list-style-image:url("resource/arrow-icon.gif")}/* 去掉下划线 */a{    /* text-decoration:line-throgth; */    text-decoration:none;}</style>

这里写图片描述

背景属性

背景属性说明 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-color 背景颜色 background-image 给背景设置图像 background-position 设置图片的起始位置 background-repeat 设置背景图片是否及如何重复。repeat-x repeat-y no-repeat

<head>  <style>    body{        background-color:blue;        background-image:url("a.jpg");        background-position:right;    }  </style></head><body>    针对近日爆出浙江省中医院医源性艾滋病病毒感染事件，国家卫生计生委表示将对负有责任的单位和人员依法依规严肃处理和问责，要求进一步加强全国医疗机构内部管理，严格规范操作，开展医疗安全专项整顿活动。</body>

这里写图片描述

链接 Link

这里写图片描述

顺序：link–>visited–>hover–>active

link:链接未访问

visited:链接已经访问

hover:鼠标放在链接上

active:点击一瞬间

css属性：

color 链接字体颜色

text-decoration 下划线等

background-color 背景色

a:link {    color: #b71c1c;    text-decoration: overline;    background-color: #212121;}a:visited {    color: #1A237E;    text-decoration: underline;    background-color: #FFEB3B;}a:hover {    color: #FFEB3B;    text-decoration: line-through;}a:active {    color: #3E2723;    text-decoration: underline;}

<a href="https://www.baidu.com/" target="_self">百度一下，你就知道</a>

表格 Table

这里写图片描述

<table border="1" cellspacing="0" cellpadding="10px">    <tr>        <th>姓名</th>        <th>国籍</th>    </tr>    <tr>        <td>奥巴马</td>        <td>美国</td>    </tr>    <tr>        <td>普京</td>        <td>俄罗斯</td>    </tr></table>

style

table,th,td {    border: 3px black solid;}

这里写图片描述

<table id="table1">    <tr>        <th>姓名</th>        <th>国籍</th>    </tr>    <tr>        <td>奥巴马</td>        <td>美国</td>    </tr>    <tr>        <td>普京</td>        <td>俄罗斯</td>    </tr></table>

#table1 {    width: 100%;    height: 100px;    border-collapse: collapse; //单元格间距为0    text-align: right; //无效}

盒子模型

这里写图片描述

<p>盒子模型演示</p><div>这是一个盒子模型，内容宽度为200px,外边距为20px，内边距为20px，边框为30px</div>

div {    background-color: lightgreen;    margin: 20px;    padding: 20px;    border: 30px solid green;}

这里写图片描述
不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Content(内容) - 盒子的内容，显示文本和图像。

边框 border

这里写图片描述

<p class="dotted">点线边框</p><p class="none">没有边框</p><p class="solid">实线边框</p><p class="dashed">虚线边框</p>

p.none {    border-style: none;}p.solid {    border-style: solid;    border-width: 20px;    border-color: #FFEB3B;}p.dotted {    border-style: dotted;}p.dashed {    border-left-style: dashed;    border-top-style: dotted;    border-right-style: double;    border-bottom-style: groove;}