CSS内部样式怎么写

发布时间：2022-03-10 16:19:03 作者：iii
来源：亿速云阅读：624

本篇内容介绍了“CSS内部样式怎么写”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

CSS内部样式怎么写

内部样式要写在<head></head>标签之间

link这个也要放在<head></head>之间

第一种：

@import " 直接写css文件路径"

</style>

第二种：

@import url(写样式表文件路径)

</style>

一、选择器

1.派生选择器

例如：(选择div里面的span)

div span{给样式}

<div>

</div>

2.还有

列如：(p和a 都选择)

p,a{给样式}

二、

背景颜色：

background-color: #ccc;

background意思是背景

color 意思是颜色

背景图片：

background-image: url(写图片路径);

background-repeat: repeat-y;

repeat 意思是重复平铺

repeat-y 意思是按y轴平铺

repeat-x 意思是按x轴平铺

background-repeat:no-repeat 意思是不平铺

background-position(设置背景图像在网页上的位置。)

background-position：center;(意思是定位图片的位置)

1.center（居中）

2.top （上）

3.right (右)

4.left (左)

5.bottom (下)

background-position:50% 50%;(这种方法也可以使背景图片居中)

background-attachment:fixed(使背景固定不随滚动条走)

fixed(意思是固定的)

attachment(意思是附在那里的意思)

background-size (规定背景图片的尺寸是css3的)

size 意思是尺寸

属性： 1.contain

(把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域 )

意思就是按等比例缩放填满区域

2.cover(铺满区域)

3.percentage(以父元素的百分比来设置背景图像的宽度和高度)

注意：如果只设置一个值，则第二个值会被设置为 "auto"。

CSS内部样式怎么写

CSS个人总结笔记（收藏吧）

三、字体

这里要注意引号嵌套时外层要用双引号内层要用单引号

font-family:"微软雅黑","字体二","字体三"........;(定义字体)

定义多个字体的好处就是系统会默认从第一个字体开始找，如果系统没有这个字体则默认使用浏览器设定的字体

font-style:normal;(定义字体如何显示)

normal(是正常显示)

italic(文本倾斜显示)

font-weight：900；（设置文本的粗细）

weight(意思是重量的意思)

默认值：normal 等于400

还可以设置为 bold 等同于700

注意：设置文本粗细的值为： 100 ~ 900 为字体指定了 9 级加粗度

font-size:50px;(设置文字的大小)

单位有：px em

1em=16像素

2em 等于当前字体尺寸的两倍。

四、文本

text-indent:;

text(文本)

indent(缩进)

单位：em

注意：

可以设置为负值。利用这种技术，可以实现很多有趣的效果，比如“悬挂缩进”，即第一行悬挂在元素中余下部分的左边：

text-align (用于文本的对齐)

align(意思是排列)

后面的属性有：1.left(左对齐)

2.right(右对齐)

3.center（居中）

4.justify(像word文档里面的两端对齐)

word-spacing(设置改变字（单词）之间的标准间隔)

spacing(间隔)

单位： em

使用这个无论是词语还是文字都必须有空格才能实现效果。

列如：

(你好欢迎你来到我的工作室。)

text-decoration(一般使用于去掉下划线)

decoration(装饰的意思)

属性：1.none 去掉下划线

2.underline (添加下划线)

3.overline (添加上面划线)

4.line-through (穿过一条线，一般多用于打折的价格划一条线)

5.blink (闪烁的)

line-height(用于设置行高)

letter-spacing 字母间隔

五、a标签的一个样式

a:hover (鼠标指针位于链接的上方)

用法：<style>

a:hover{

font-size：20px;

</style>

当鼠标滑上去的时候字体变大20px。

六、列表

列表样式：

如何去掉无序列表前面的小圆点：

list-style:none;

七、表格：

table, th, td

border: 1px solid blue;

border：边界边框

1px 定义边框的粗细

solid 定义实线

blue 定义颜色

border-collapse:collapse;(将边框折叠为单一边框)

border-spacing:50px;(将格与格之间的间距拉开，

但是是边框线没有合并的情况下才能生效)

八、行内元素转换为块元素

display:block;

block 使其转化为块元素

inline 使其转化为行内元素

九、外边距与内边距

内边距：

padding-top (上)

padding-right (右)

padding-bottom (下)

padding-left (左)

外边距：

margin-top (上)

margin-right (右)

margin-bottom (下)

margin-left (左)

注意：与其到底是使用外边距还是内边距依据谁对谁而定！！

十、相对定位：(相对定位虽然元素离开原来的位置，但是不释放原来的空间)

position: relative;

left: 30px;

top: 20px;

十一、绝对定位：(绝对定位元素离开，并且释放原来的空间)

position: absolute;

left: 30px;

top: 20px;

为了浏览器适应，所以使用绝对居中时上面一定要写一个相对定位作为参照。

十二、overflow：溢出部分的处理

scroll(卷帘) 出现滚动条

hidden 隐藏

auto 自动出现滚动条

伪类选择器：

#a ul li:first-child{

margin-left:0px;

first-child(第一个孩子的意思)

以上这段代码便是找到类a里面的ul 里面的Li 将第一个li标签的外左间距去掉。

last-child(最后一个)

#a ul li:nth-child(1){

括号里面是几选择的就是第几个

如果说三的倍数就是写 3N

十三、CSS样式的权重问题：

ID>Class>标签本身(属性选择器)

十四、相对定位绝对定位的理解：

绝对定位：将被赋予此定位方法的对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，即还是遵循HTML定位规则的，则依据body对象左上角作为参考进行定位。

相对定位(relative)：对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。

且不释放原来的位置。依据当前位置进行定位。

十五、边边阴影：

box-shadow(给边框阴影)

div

box-shadow: 10px 10px 5px #888888;

阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色

给边框切圆角：

border-radius:4px;

注意这里面的值取偶不取奇

相关属性： border-top-right-radius ,

border-bottom-right-radius ,

border-bottom-left-radius ,

border-top-left-radius

文本溢出时显示为省略号（..........）

text-overflow ：ellipsis

resize:none;

十六、input点击以后蓝色边框的去除：

outline:none; 去除input的蓝色的那个线

十七、 ul ol dl 默认都有一个外边距：

给他们所有的margin:0;padding:0;

“CSS内部样式怎么写”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！

CSS内部样式怎么写

相关阅读