CSS

在head中插入css

<link href="sometext.css" rel="stylesheet" />
body {
    margin: 0 auto;
    max-width: 40em;
    line-height: 125%;
}

max-width:em是相对于其parent元素来设置字体大小的，一般都是以<body>的“font-size”为基准

margin:0 auto居中

margin-bottom：设置元素的下外边距。margin-left：设置元素的左外边距。margin-right：设置元素的右外边距。margin-top：设置元素的上外边距。

font-weight: bold 标题加粗

<section class="hero">
  <div class="hero-body">
    <p class="title">
      Hero title
    </p>
    <p class="subtitle">
      Hero subtitle
    </p>
  </div>
</section>

CSS syntax

CSS 选择器

SELECTOR{

　　KEY: VALUE;

　　...

}

 

 

<!DOCTYPE html>
<html>
<head>
<style>
p.hometown
{ 
background:yellow;
}
</style>
</head>

<body>
<p>My name is Donald.</p>
<p class="hometown">I live in Ducksburg.</p>

<p>My name is Dolly.</p>
<p class="hometown">I also live in Ducksburg.</p>

</body>
</html>

这个的意思就是Style all <p> elements with class="hometown":

所以，

I live in Ducksburg.和
I also live in Ducksburg.
会变黄。

 Values

color: red

background-color: #ff0000

border-color: rgba(255,0,0,1.0)

 Box model

 

margin-top: 10px;

padding-left: 20px;

margin: 10px 5px 15px 20px;

border: 1px solid black

 Units

dpi(ppi)

dots(points)per inch

PC screen: 72/96(Mac /Win defaults)

can be 120+ nowadays

mobile:200+

 

Absolute Lengths

px　　pixel

pt　　point

cm,in....

Relative Lengths

UnitDescription 
em Relative to the font-size of the element (2em means 2 times the size of the current font)
ex Relative to the x-height of the current font (rarely used)
ch Relative to width of the "0" (zero)
rem Relative to font-size of the root element
vw Relative to 1% of the width of the viewport*
vh Relative to 1% of the height of the viewport*
vmin Relative to 1% of viewport's* smaller dimension
vmax Relative to 1% of viewport's* larger dimension  
% Relative to the parent element

 CSS grids

圣杯布局（Holy Grail Layout）

其指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。

Grid layout

<div class="container">
    <p>child one</p>
    <p>child two</p>
    <p>child three</p>
    <p>child four</p>
    <p>child five</p>
</div>
.container{
    display: grid
　　grid-template-columns:200px 200px 200px//1fr 2fr 
　　gap: 20px

}

grid 是一个 CSS 所有网格容器的简写属性，可以用来设置以下属性：

  • 显式网格属性： grid-template-rows、grid-template-columns 和 grid-template-areas。(设置行列尺寸）
  • 隐式网格属性： grid-auto-rows、grid-auto-columns 和 grid-auto-flow。
  • 间距属性： grid-column-gap 和 grid-row-gap。

所以area那个属性其实是要交换位置的，1323变成1233

 

 

.unit.y3-tb2.cp20{
    /*从9跨到12*就是从第9列开始跨到12列/
    grid-column:  9/ span 4;
}

 

Responsive

 

 

 

/*1、当设备屏幕小于1180px时会采用该样式*/

@media screen and (max-width:1180px) { css codes }

/*1、当设备屏幕小于1180px大于400px时会采用该样式*/

@media screen and (max-width:1180px) and（min- width:400px）{ css codes }

posted @ 2022-05-01 17:57  君逸堂  阅读(42)  评论(0)    收藏  举报