CSS基础入门

最新推荐文章于 2022-08-03 17:55:07 发布

酱紫学Java

最新推荐文章于 2022-08-03 17:55:07 发布

阅读量229

点赞数 2

文章标签： html css

本文链接：https://blog.csdn.net/qq_52519008/article/details/122125409

版权

1.什么是css

<style>填写内容</style>

<style type="text/css">
    {
        内容
    }
</style>

2.样式的定义

选择器 {属性：属性值;属性：属性值;}

选择器的分类：

标签选择器:选择器的名称是某个标签，当前页面里所有的该标签自动应用选择器的样式
id选择器：通过id属性引用的标签中才会起作用

例：#pp{color: red;}
类选择器：通过class属性引用的标签中才会起作用

例：.ppp{color: blue;}
```
<head>
</head>
<style type="text/css">
    p{}
    #pp{color: red;}
    .ppp{color: blue;}
</style>
<body>
</body>
```
要注意的是样式的定义要在</head>和<body>之间

3.常用样式

文本样式

text-decoration: 设置文本线的位置，如果是链接可以设置为none;

text-align: 设置文本的对齐方式；

<style type="text/css">
    p{ text-align: center;color: aqua;}
    a{text-decoration: none;}
</style>

字型样式

font-family: 规定元素的字体系列；

font-size: 设置字体的大小;

font-style: 属性定义字体的风格;

font-weight: 规定字体的粗细;

<style type="text/css">
    .pp{
        font-family: "黑体";font-size:32;font-style: italic;
        font-weight: 100;
    }
</style>

间距样式

line-height: 设置以百分比计的行高;

值	描述
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。

letter-spacing: 设置 h1 和 h2 元素的字母间距;

值	描述
normal	默认。规定字符间没有额外的空间。
length	定义字符间的固定空间（允许使用负值）。

word-spacing: 规定段落中的字间距;

值	描述
normal	默认。定义单词间的标准空间。
length	定义单词间的固定空间。

颜色设置

color属性对应的值可以为：

英文单词 red,green,blue
3位16进制 #0f0;（ 0-9，a-f）

6位16进制#00ff00;

<style>
    p{color: aqua;}
    #ppp{color: rgb(112, 231, 33);}
    .pp{color: blue;}
</style>

注意 :

bgcolor、background-color和color区别

bgcolor：是html标签的属性，body 和table 来设置页面或者表格的背景颜色

background-color：是css样式中用来设页面或者表格的背景颜色

color: 是css样式中用来设置文本的颜色

在table里的样式应用

border: border-width、border-style 以及 border-color 的简写属性

可以按顺序设置如下属性：

border-width
border-style
border-color

如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的。

border-width: 设置四个边框的宽度;

值	描述
thin	定义细的边框。
medium	默认。定义中等的边框。
thick	定义粗的边框。
length	允许您自定义边框的宽度。
inherit	规定应该从父元素继承边框宽度。

border-style: 设置下边框的样式;

值	描述
none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。

border-color: border-color 属性设置四条边框的颜色。此属性可设置 1 到 4 种颜色。

请看下面的例子：

例子 1

border-color:red green blue pink;

上边框是红色
右边框是绿色
下边框是蓝色
左边框是粉色

例子 2

border-color:red green blue;

上边框是红色
右边框和左边框是绿色
下边框是蓝色

例子 3

border-color:dotted red green;

上边框和下边框是红色
右边框和左边框是绿色

例子 4

border-color:red;

所有 4 个边框都是红色

border-right-width: 设置元素的右边框的宽度 ;

border-right-color: 设置元素的右边框的颜色;

border-right-style: 设置元素右边框的样式;

padding 属性

设置 p 元素的 4 个内边距;

padding-top:设置 p 元素的上内边距 ;

padding-left: 设置 p 元素的左内边距;

padding-right: 设置 p 元素的右内边距;

padding-bottom: 设置 p 元素的下内边距;

list-style属性

把图像设置为列表中的列表项目标记

list-style-image: 属性使用图像来替换列表项的标记

值	描述
inside	列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside	默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。

list-style-position: 规定列表中列表项目标记的位置

值描述
URL 图像的路径。
none 默认。无图形被显示。

值	描述
URL	图像的路径。
none	默认。无图形被显示。

<style>
    li{list-style-position: outside; list-style-image: url("/12-19/30.jpg");}
</style>
<body>
    <ul>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
    </ul>
    </body>

背景颜色

background-color: 属性设置元素的背景颜色

background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。

盒子模型

border:指盒子的边框

margin ：指当前容器到外边框的距离

padding：指容器内的内容到容器边框的距离

酱紫学Java

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础入门

1.什么是css<style>填写内容</style><style type="text/css"> { 内容 }</style>2.样式的定义选择器 {属性：属性值;属性：属性值;}选择器的分类：标签选择器:选择器的名称是某个标签，当前页面里所有的该标签自动应用选择器的样式 id选择器：通过id属性引用的标签中才会起作用例：#pp{color: red;} 类选择器...
复制链接

扫一扫