CSS Kullanıcı Arayüzü

CSS Kullanıcı Arayüzü

Bu bölümde, aşağıdaki CSS kullanıcı arayüzü özelliklerini öğreneceksiniz:

  • resize
  • outline-offset

Tarayıcı Desteği

Tablodaki rakamlar, bu özelliği tamamen destekleyen ilk tarayıcı sürümünü belirtmektedir.

属性 Chrome IE Firefox Safari Opera
resize 4.0 Desteklenmiyor 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

CSS Büyültme

resize Özellik, elemanın kullanıcı tarafından büyütülüp büyütülmemesi gerektiğini (ve nasıl olacağını) belirler.

Bu div elemanı, kullanıcı tarafından büyütülebilir!

Büyültme: Bu div elemanının sağ alt köşesini tıklayıp sürükleyin.

Dikkat:Internet Explorer, resize özelliğini desteklememektedir.

Aşağıdaki örnek, kullanıcıların sadece <div> elemanının genişliğini ayarlamalarına olanak tanır:

Örnek

div {
  resize: horizontal;
  overflow: auto;
}

亲自试一试

Aşağıdaki örnek, kullanıcıların sadece <div> elemanının yüksekliğini ayarlamalarına olanak tanır:

Örnek

div {
  resize: vertical;
  overflow: auto;
}

亲自试一试

Aşağıdaki örnek, kullanıcıların <div> elemanının yüksekliğini ve genişliğini ayarlamalarına olanak tanır:

Örnek

div {
  resize: both;
  overflow: auto;
}

亲自试一试

Birçok tarayıcıda, <textarea> varsayılan olarak büyütülebilir. Burada, bu genişletilebilirliği devre dışı bırakmak için resize özelliğini kullanıyoruz:

Örnek

textarea {
  resize: none;
}

亲自试一试

CSS Kontur Ofseti

outline-offset Özellik, kontur ile elemanın kenar çerçevesi arasına boşluk ekler.

Bu div, çerçeve kenarında 15px'lik bir kontur çizgisi içermektedir.

Dikkat:Kontur çerçeve ile farklıdır! Çerçeve ile farklı olarak, kontur çizgileri elemanın çerçevesinin dışında çizilir ve diğer içeriklerle çakışabilir. Ayrıca, kontur da elemanın boyutlarının bir parçası değildir: elemanın toplam genişliği ve yüksekliği kontur çizgisi genişliğinden etkilenmez.

Aşağıdaki örnekte, outline-offset özelliği ile çerçeve ve kontur arasındaki boşluk eklenmiştir:

Örnek

div.ex1 {
  margin: 20px;
  border: 1px solid black;
  outline: 4px solid red;
  outline-offset: 15px;
} 
div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
}

亲自试一试

CSS 用户界面属性

下表列出了所有用户界面属性：

属性 描述
outline-offset 在轮廓和元素的边框边缘之间添加空间。
resize 规定元素是否可由用户调整大小。