中英文模式阅读
中文模式阅读
英文模式阅读

The Best CSS and CSS3 Tutorials

Cascading Style Sheets (CSS) {#cascading-style-sheets-css-}


CSS是Cascading Style Sheets的首字母缩写。它最初是在1996年发明的,现在是所有主要网络浏览器的标准功能。


CSS允许开发人员通过"设计"该页面的HTML结构来控制网页的外观。


CSS规范由。维护World Wide Web Consortium (W3C)


你可以在CSS中构建一些非常神奇的东西,比如这个纯CSSMinesweeper game
(它不使用JavaScript)。


一个好的开始是freeCodeCamp课程Introduction to Basic CSS


对初学者的另一个建议是W3CStarting with HTML + CSS
它教授如何创建样式表。


网站CSS Zen Garden
这是一个很好的例子,如何将相同的html设计为完全独特。


为了演示CSS的强大功能,请查看Species In Pieces


开始学习CSS的最佳地方是使用freeCodeCamp2-hour intro to CSS tutorial


然后,如果你感觉更冒险,我们就有一个整体12-hour course that covers HTML, HTML5, and CSS in detail

Flexbox {#flexbox}


Flexbox是一种在CSS3中构建内容的新方法。它提供了一种创建响应式网站的绝佳方式,这些网站可以在不同的屏幕尺寸和订单内容中良


使用flexbox有3个简单的步骤。

  1. Convert parent container to a flex container by using display:flex; in the css section
  2. Adjust arrangement of different containers using flex-direction
  3. Adjust individual items by using properties like justify-content, align-items etc.

Flexbox Layout旨在提供一种更有效的方式来布置,对齐和分配容器中的项目之间的空间,即使它们的大小未知和/或动态(因此单词"flex").flex布局背后的主要思想是让容器能够改变其物品的宽度/高度(和顺序),以最好地填充可用空间。

  • main-axis : The main axis of a flex container is the primary axis along which flex items are laid out. Beware, it is not necessarily horizontal; it depends on the flex-direction property (see below).
  • main-start | main-end :The flex items are placed within the container starting from main-start and going to main-end.
  • main size : A flex item's width or height, whichever is in the main dimension, is the item's main size. The flex item's main size property is either the 'width' or 'height' property, whichever is in the main dimension.
  • cross axis : The axis perpendicular to the main axis is called the cross axis. Its direction depends on the main axis's direction.
  • cross-start | cross-end : Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.
  • cross size : The width or height of a flex item, whichever is in the cross dimension, is the item's cross size. The cross size property is whichever of 'width' or 'height' that is in the cross dimension.

Grid Layout {#grid-layout}


CSS Grid Layout,简称为Grid,是一种CSS中最新,最强大的布局方案。它是supported by all major browsers
并提供了一种在页面上定位项目并移动它们的方法。


它可以自动分配项目 areas
,大小和调整大小,根据您定义的模式创建列和行,并使用新引入的所有计算fr
单元。

Why Grid? {#why-grid}

  • You can easily have a 12-column grid with one line of CSS. grid-template-columns: repeat(12, 1fr)
  • Grid lets you move things in any direction. Unlike Flex, where you can move items either horizontally (flex-direction: row) or vertically (flex-direction: column) - and not both at the same time - Grid lets you move any grid item to any predefined grid area on the page. The items you move do not have to be adjacent.
  • With CSS Grid, you can change the order of HTML elements using only CSS . Move something from top to the right, move elements that were in the footer to the sidebar etc. Instead of moving the <div>from <footer> to <aside> in the HTML, you can just change its placement with grid-area in the CSS stylesheet.

Grid vs. Flex {#grid-vs-flex}

  • Flex is one-dimensional - either horizontal or vertical, while Grid is two-dimensional, meaning you can move elements in both horizontal and vertical planes
  • In Grid, we apply layout styles to the parent container and not the items. Flex, on the other hand, targets the flex item to set properties like flex-basis, flex-grow, and flex-shrink
  • Grid and Flex are not mutually exclusive. You can use both on the same project.

Checking browser compatibility with @supports {#checking-browser-compatibility-with-supports}


理想情况下,在构建站点时,您可以使用Grid进行设计,并使用Flex作为后备。您可以查看您的浏览器是否支持网格@support
CSS规则(又称特征查询)。这是一个例子:

.container {
  display: grid; /* display grid by default */
}

@supports not (display: grid) { /* if grid is not supported by the browser */
  .container {
    display: flex; /* display flex instead of grid */
  }
}

Getting Started {#getting-started}


要使任何元素成为网格,您需要分配它display
财产到grid
,像这样:

.conatiner {
  display: grid;
}

就是这样。你刚刚做了你的.container
一个网格。里面的每个元素.container
自动成为网格项。

Defining templates {#defining-templates}


行和列

grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto 300px;

地区

grid-template-areas: 
  "a a a a"
  "b c d e"
  "b c d e"
  "f f f f";

要么

grid-template-areas:
  "header header header header"
  "nav main main sidebar";

Grid Areas {#grid-areas}


以下是有关如何定义和分配网格区域的示例代码:

.site {
  display: grid;
  grid-template-areas: /* applied to grid container */
    "head head" /* you're assigning cells to areas by giving the cells an area name */
    "nav  main" /* how many values kind of depends on how many cells you have in the grid */
    "nav  foot";
}

.site > header {
  grid-area: head;
}

.site > nav {
  grid-area: nav;
}

.site > main {
    grid-area: main;
}

.site > footer {
    grid-area: foot;
}

The fr unit {#the-fr-unit}


Grid引入了一个新的fr
单位,代表 fraction
。使用的好处fr
单位是它为你处理计算。运用fr
避免边距和填充问题。同%
em
它在计算时变成数学方程式grid-gap
。如果你用过fr
单位,它会自动计算列和装订线尺寸,并相应地调整列的大小。此外,最后也没有出血间隙。

Examples {#examples}

Changing the order of elements based on screen size {#changing-the-order-of-elements-based-on-screen-size}


假设您希望在较小的屏幕上将页脚移动到底部,并在较大的屏幕上向右移动,并且两者之间还有一堆其他HTML元素。


简单的解决方案是改变grid-template-areas
根据屏幕尺寸。你也可以 change the number of columns and rows based on the screen size
也是。这是Bootstrap网格系统的一个更简洁,更简单的替代方案(col-xs-8 col-sm-6 col-md-4 col-lg-3
)。

.site {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "title title"
    "main header"
    "main sidebar"
}

@media screen and (min-width: 34em) { /* If the screen is big enough, use a different template for grid areas */
  .site {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-areas:
      "title title title"
      "main header header"
      "main sidebar footer"
  }
}

More Information: {#more-information-}


选择器是用于定位HTML元素以应用样式的CSS规则。标记名称,类名称,ID和属性是用作选择器的一些钩子。

Selector Syntax {#selector-syntax}


按特定顺序排列的选择器构建规则以定位元素。一个例子:

/* selects anchor tags */
a { 
    color: orange;
}

/* selects elements with hero class */
.hero {
    text-align: center;
}

Type of Selectors {#type-of-selectors}

  • TypeDescription are Type selectors and Tag names are used to select elements such as h1 or a.
  • Universal Selectors apply to all elements.
  • div * matches all elements within div elements.
  • Attribute Selectors are Selectors that target elements based on their attributes [and optionally, their values].
  • h1[title] selects h1 elements with title attribute.
  • Class Selectors are Selectors that target elements using their class names.
  • ID Selectors are Selectors that use ID to target elements. #logo selects the element with logo as ID.
  • Pseudo-class Selectors are Special selectors that target elements based on their state. a:hover selector applies style when pointer hovers over links.

Selector Combinators {#selector-combinators}


组合者:目的white space
后裔组合子。.nav li
选择所有li
班上的孩子们.nav
,包括嵌套li
元素。>
儿童组合子。.menu > li
选择所有具有元素直接子元素的li.menu
类。+
相邻的兄弟组合子。.logo + h1
目标h1
这是一个直接的兄弟姐妹.logo
类。~
一般兄弟组合。header ~ div
目标div
作为兄弟姐妹的元素header
元素。


本节详细介绍了所有这些选民。

More Information: {#more-information--1}


您可以在这些资源上了解有关选择器的更多信息:


CSS中的选择器(级联样式表)是基于 specificity.
有了这个,我们可以更加具体地说明我们的样式规则,并覆盖可能针对相同元素但不具体的其他规则。


这种特异性层次结构的工作方式基于权重。这意味着元素选择器的权重为1(一),类选择器的权重为10(十),id选择器的权重为100(一百)。我们能够将不同的选择器组合在一起,更具体地说明我们想要改变的元素。


举个例子:

    p {
      color: blue;
    }
    p .red {
       color: red;
    }

我们的类型选择器p将选择我们的html文档中的所有p元素,但它只有一个权重。相反,类选择器的权重为11,因为我们将类型选择器与类选择器组合在一起(此选择器将所有p元素与红色类匹配)。


注意:

  • Directly targeted rules will always have precedence over rules which inherit elements from their ancestor.
  • Specificity is only applied when multiple declarations are targeting the same element, and only then this rule is applied.
  • Specificity is usually why some of the style rules do not apply to elements when you would expect them to.

CSS Display {#css-display}


display属性指定用于HTML元素的框的类型。它有20个可能的关键字值。常用的是:

    .none             {display: none}
    .block            {display: block}
    .inline-block     {display: inline-block}
    .inline           {display: inline}
    .flex             {display: flex}
    .inline-flex      {display: inline-flex}
    .inline-table     {display: inline-table}
    .table            {display: table}
    .inherit          {display: inherit}
    .initial          {display: initial}

display:none
在使网站响应时,财产通常会有所帮助。例如,您可能希望在屏幕尺寸缩小时隐藏页面上的元素,以便弥补空间不足。display: none
不仅会隐藏元素,而且页面上的所有其他元素都会表现得就像该元素不存在一样。


这是这个属性和最大的区别visibility: hidden
property,隐藏元素但将所有其他页面元素保留在隐藏元素可见时所显示的位置。


这些关键字值分为六类:

  • <display-inside>
  • <display-outside>
  • <display-listitem>
  • <display-box>
  • <display-internal>
  • <display-legacy>

中英文模式阅读
中文模式阅读
英文模式阅读

查看英文原文

查看更多文章


公众号:银河系1号


联系邮箱:public@space-explore.com


(未经同意,请勿转载)