CSS基础

最新推荐文章于 2024-01-17 12:02:56 发布

HYJ0101

最新推荐文章于 2024-01-17 12:02:56 发布

阅读量208

点赞数

分类专栏：前端基础文章标签： css html

本文链接：https://blog.csdn.net/u014761412/article/details/110230095

版权

前端基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

一、HTML文件引入CSS样式的三种方法
二、CSS语句基本格式
三布局对齐

一、HTML文件引入CSS样式的三种方法

在标签项中直接引用，style=“样式1；样式2“
在head标签中通过style标签进行定义
在link标签中倒入css文件

<link rel="stylesheet" href="文件路径">

二、CSS语句基本格式

2.1 基本语法

选择器 { 属性：值；属性：值；······}

p {
    color: blue;
}

2.2 选择器

2.2.1 基本选择器

元素选择器

选择器位置是使用元素标签名的

p {
    color: blue;
}

id选择器

选择器位置是使用元素标签id的值，前面加上#

#i1 {
    color: blue;
}

类选择器
选择器位置是使用元素标签class的值，前面加上.

如果标签中的类有多个，那么用逗号进行分割

.c1 {
    color: palegreen;
}

<p class="c1">

2.2.2 通用选择器

会应用于所有的标签

* {
    color: palegreen;
}

2.2.3 组合选择器

后代选择器
后代选择器就是两种选择器的组合选择器1 选择器2意思是找到选择1标签下的所有选择器2的标签

/*找到h1标签下所有类属性为c1的标签*/
h1 c1 {
    color: palegreen;
}

子代选择器
只找寻符合条件的子代标签，不会找孙级的标签

/*找到h1标签下所有类属性为c1的次级标签*/
h1>c1 {
    color: palegreen;
}

毗邻选择器
找寻符合条件的紧挨着选择器1的标签,必须是同级的

div+p {
    color: palegreen;
}

同级选择器
选择器1的标签,后面所有同级的符合标签2的选择器

div-p {
    color: palegreen;
}

2.2.4 属性选择器

选择的标签带有某种选择器标明的属性

/*找到所有带有属性title的标签*/
[title] {
    color: palegreen;
}

/*找到所有带有属性title=“123”的标签*/
[title=“123”] {
    color: palegreen;
}

2.3 背景

CSS 背景属性用于定义HTML元素的背景

CSS中，颜色值通常以以下方式定义:

十六进制 - 如："#ff0000"
RGB - 如：“rgb(255,0,0)”
颜色名称 - 如：“red”

背景分类：

background-color：设定背景颜色

body {background-color:#b0c4de;}

background-image 使用图像来设定背景

body {background-image:url('paper.gif');}
background-repeat:repeat-x
}
/* 只在水平方向上平铺 */

2.4 文字

h2 {color:rgb(255,0,0);} /* 文字颜色 */

h1 {text-align:center;} /* 居中 */
p.date {text-align:right;} /* 右对齐 */
p.main {text-align:justify;} /* 两端对齐 */

p {text-indent:50px;} /* 文本缩进 */

2.5 表格

border-collapse：折叠边框

table
{
    border-collapse:collapse;
}
table,th, td
{
    border: 1px solid black;
}

表格宽度和高度

table 
{
    width:100%;
}
th
{
    height:50px;
}

表格文字对齐

就是使用文字的对齐方式

td
{
    text-align:right;
}

td
{
    height:50px;
    vertical-align:bottom; /*底端对齐*/
}

表格填充

td
{
    padding:15px;
}

2.6 盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素

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

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

这个div我们设置的宽度是300px，也就是content的内容，加上padding 25 * 2，加上border 25 * 2，加上margin 25 * 2，其实这个html块总共的宽度是450px

2.7 显示

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。

但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局

h1 {visibility:hidden;}

2.8 定位

position 属性指定了元素的定位类型

position 属性的五个值：

static

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

静态定位的元素不会受到 top, bottom, left, right影响

	div.static {
    position: static;
    border: 3px solid #73AD21;
}

relative
fixed

元素的位置相对于浏览器窗口是固定位置

即使窗口是滚动的它也不会移动

p.pos_fixed
{
    position:fixed;
    top:30px;
    right:5px;
}

absolute

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:

h2
{
    position:absolute;
    left:100px;
    top:150px;
}

sticky

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置

div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: green;
    border: 2px solid #4CAF50;
}

2.9 Overflow

visible：默认值。内容不会被修剪，会呈现在元素框之外。
hidden：内容会被修剪，并且其余内容是不可见的。
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit：规定应该从父元素继承 overflow 属性的值

三布局对齐

元素居中对齐：要水平居中对齐一个元素, 可以使用 margin: auto;

.center {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}

如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用

文本居中对齐

.center {
    text-align: center;
    border: 3px solid green;
}

图片居中对齐：要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中

img {
    display: block;
    margin: auto;
    width: 40%;
}

左右对齐 - 使用定位方式

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

左右对齐 - 使用 float 方式

.right {
    float: right;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

当像这样对齐元素时，对 <body> 元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异

垂直居中对齐 - 使用 padding

.center {
    padding: 70px 0;
    border: 3px solid green;
}

如果要水平和垂直都居中，可以使用 padding 和 text-align: center:

HYJ0101

关注

0
点赞
踩
0

收藏

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

文章目录一、HTML文件引入CSS样式的三种方法二、CSS语句基本格式2.1 基本语法2.2 选择器2.2.1 基本选择器2.2.2 通用选择器2.2.3 组合选择器2.2.4 属性选择器一、HTML文件引入CSS样式的三种方法在标签项中直接引用，style=“样式1；样式2“在head标签中通过style标签进行定义在link标签中倒入css文件<link rel="stylesheet" href="文件路径">二、CSS语句基本格式2.1 基本语法选择器 { 属性：值
复制链接

扫一扫