关于css:CSS和常用属性总结

6次阅读

共计 1578 个字符，预计需要花费 4 分钟才能阅读完成。

css 是层叠样式表，能够对网页进行润饰和渲染的一门技术。

1. 间接应用（不举荐）起因：标签中的属性很多，会造成页面凌乱，并且不能被复用。

通过标签上的 style 属性 给 div 设置款式

边框:2px solid red 
字体大小:26px
背景色彩为:pink

<div style="border:2px solid red;font-size:26px; background:pink;"> 这是一个 div...</div>

`
<div style=”border:2px solid red;font-size:26px; background:pink;”> 这是一个 div…</div>
`

2. 在 < head> 中通过 < style> 标签引入 CSS
实现了代码的拆散和复用，初步实现了代码的拆散。

<head>
<style type="text/css">
    span{
        border:2px solid blue; 
        font-size:22px; 
        background:red;
    }
</style>
</head>

3. 应用 link 连贯援用内部 CSS 文件

在 html 中引入 css 文件

<link ref="stylesheet" href="CSS 文件门路">

xx.css 文件

@charset "utf-8";
 span{
        border:2px solid blue; 
        font-size:22px; 
        background:red;
    }

1. 通过元素名（标签名）抉择指定名称所有被选中的标签

span{}
div{}

2.class 选择器

每个标签都能够设置一个 class 属性值，通过抉择 class 的值抉择。

.s1{}
.s2{}

* 如果一个标签的 class 值由多个 < span class = “s1 s2”>，s2 的设置会笼罩 s1 的设置。

3.id 选择器

也能够依据 id 的属性值抉择标签。

#d1{}
#d2{}

4. 后辈选择器

格局：先人后辈{}

div p{/* 匹配所有 div 中的 p 标签 */}

文本属性

1.text-align: 设置元素内的文本内容对齐形式。
2.text-decoration：设置文本的下划线形式。
3.text-indent：设置文本的缩进，单位：px/%。
4.letter-spacing：设置字符间距。
5.text-shadow:x（程度位移）x（垂直位移）x（暗影扩散值）x（色彩）; 设置文本暗影。

字体属性

1.font-siez: 字体大小。
2.font-weight: 文字粗细。
3.font-family：字体的格局。
4.color: 字体色彩

背景属性

background-color：背景色彩。
background-img：设置背景图片，url=“”

*background-repeat：设置或检索背景图片的排列形式（repeat 默认值,repeat- x 横向反复，no-repeat 没有反复）

background-position: 设置或检索背景图片地位
background: 背景色彩背景图片背景图片是否反复背景图片的地位

边框 border

border-width: 2px; — 设置元素边框的宽度

border-style: solid; — 设置元素边框的款式
border-color: red; — 设置元素边框的色彩

margin: 设置元素的外边距

display 属性

display 属性用来设置元素的类型；罕用的值：

block：块级元素的默认值
    默认状况下独占一行
    能够设置宽高
    // 比方: div/p/h1~h6/form/table 等元素都是块级元素
inline：行内元素的默认值
    默认状况下多个行内元素能够处在同一行
    个别不能设置宽高
    // 比方: span/input/img/i/b 等元素都是行内元素
inline-block：行内块元素
    多个元素既能够显示在同一行, 也能够设置宽和高
none：示意暗藏元素

正文完